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Preface 


Ces dernieres annees, l’Open Source a demontre sa capacite a conquerir 
des pans entiers de l’informatique d’entreprise, au point parfois de 
devenir la reference detronant les solutions etablies. C’est le cas des ser- 
vices d’infrastructure, comme la messagerie avec les logiciels libres 
Sendmail ou Postfix, ou la publication web avec Apache. 

Toutefois, il n’en va pas encore de meme pour les applications presentes 
sur le poste de travail de l’utilisateur. Le plus souvent les logiciels Open 
Source sont peripis comme des suiveurs, se contentant de copier des 
fonctionnalites deja disponibles par ailleurs. D’ou un sentiment de deca- 
lage permanent. 

Cette vision est cependant depassee et ce cahier du programmeur con- 
sacre a XUL en est le meilleur exemple. Ainsi le succes de Firefox repose 
deja naturellement plus sur les innovations offertes a l’utilisateur, que sur 
son aptitude a faire aussi bien que ses concurrents. Mais que dire alors 
du framework Mozilla dont Firefox et XUL ne sont que des parties 
emergees ? 

Ici il n’est done plus question de suiveurs : le framework Mozilla livre 
des aujourd’hui une technologie que Microsoft ne proposera qu’avec son 
prochain systeme, au mieux dans un an. En outre, ce framework est, lui, 
d’ores et deja multi-plates-formes ! 

En vous accompagnant dans la creation dune application type, Jonathan 
vous propose de decouvrir les facettes parfois complexes d’un environne- 
ment novateur qui a fait le choix des standards et dune reutilisation 
maximale des Engages existants. 
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Car c’est une autre qualite du framework Mozilla que de tirer profit des 
standards ouverts, sur lesquels nous avons tous, « techniciens » et entre- 
prises, investi ces dernieres annees. XML y joue naturellement un role 
cle, mais l’environnement reprend aussi largement CSS, JavaScript et 
l’incontournable DOM, desormais bien entre dans les moeurs et qui 
ouvre la voie a la mutualisation des efforts... 

Aussi, que vous ayez deja capitalise une experience en PHP 5 (et son 
API DOM desormais conforme) ou en JavaScript cote client (avec 
Firefox, voire Microsoft Internet Explorer), vous ne serez pas depayse a 
la lecture de cet ouvrage. De meme, si vous avez cree des applications 
AJAX, vous pourrez reutiliser votre savoir-faire pour dynamiser votre 
application XUL. 

Mozilla reussit ainsi le tour de force de creer un environnement novateur 
tout en capitalisant sur l’existant, qualite determinante face a ses concur- 
rents. II est temps pour vous de l’experimenter ! :-) 


Stephane MARIEL 
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Avant-propos 


Un renouveau necessaire dans le monde 
des clients riches 

Le grand reseau Internet arrive a un tournant majeur de son existence : 
derriere lui, une balkanisation effroyable des sites, des normes et des 
navigateurs ; devant lui, une perspective devolutions prometteuses, de 
nouvelles bases de developpement et de nouveaux standards. On entend 
desormais parler de nouveaux formats, comme XML, CSS, XHTML, 
ECMAScript et de nouvelles pratiques de developpement plus ordon- 
nees, posant des fondations solides pour l’avenir et etendant le champ 
fonctionnel des applications fondees sur les technologies de l’lnternet. 

Dans le meme temps, on assiste a un renouveau des clients riches, appli- 
cations pour les utilisateurs, souvent programmees dans des langages 
lourds associes a des bibliotheques graphiques. Java et Swing, C et GTK 
ou QT animent ainsi un grand nombre de postes de travail. En depit de 
leur succes, ces langages reclament un long apprentissage et obligent 
parfois a ce que les programmes qui en resultent soient adaptes pour 
Linux, Windows ou Mac OS, engendrant des couts de developpement 
eleves et des evolutions ralenties. 

Que faire alors ? N’existe-t-il pas une perspective visant a associer viva- 
cite des applications web et richesse des applications desktop ? 
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Une reponse innovante est nee au sein du projet Mozilla : elle s’appelle 
XPFE, Cross Platform Front-End et est constitute d’un ensemble de 
technologies, qui reposent toutes sur les standards du Web et sont toutes 
aussi puissantes qu’un langage traditionnel pour applications riches. 
XUL, objet de cet ouvrage, represente la partie visible de ce grand 
ensemble, puisque, associe a des technologies complementaires comme 
JavaScript ou CSS, pour ne citer que les plus connues, il se charge de 
decrire les interfaces graphiques. 


Quel est I’objectif de cet ouvrage ? 

L’objet qui sous-tend tout l’ouvrage est de demontrer par l’exemple que 
le XPFE n’a rien a envier a un environnement de developpement tradi- 
tionnel et que, de surcroit, il est capable de depasser les plus grands, tant 
par son caractere evolutif et la facilite avec laquelle on le maitrise, que 
par sa simplicity et la rapidite de developpement qu’il entraine. 
L’exemple d’application qui illustre ce livre demontrera l’immense 
etendue des possibility des technologies conipies au sein du projet 
Mozilla : cette application s’appelle XUL Forum et se compose, comme 
le nom le laisse presager, d’un systeme de forum ecrit en XUL ! 

Les solutions techniques choisies pour ce developpement ne seront pas 
necessairement les plus simples : nous avons privilegie celles qui pour- 
ront vous servir plus tard pour sortir de problemes bien plus complexes 
dans vos propres applications ! Parfois, nous utiliserons des solutions 
relativement peu elegantes, mais pratiques et fonctionnelles. S’il n’est pas 
toujours possible de detailler la solution ideale, des apartes seront la pour 
replacer la technologie dans son contexte. Notes et annexes illustreront 
la diversity des technologies XML, CSS ou JavaScript sans, esperons-le, 
alourdir le propos principal. 

Cet ouvrage est done a la fois efficace et precis. L’objectif final est 
d’arriver au resultat qui sera decrit dans le deuxieme chapitre, une fois 
qu’aura ete parcourue la vaste etendue des technologies Mozilla utiles a 
notre projet. 


A qui s’adresse cet ouvrage ? 

On pourrait croire a tort que l’ouvrage est reserve aux programmeurs 
confirmes : il n’en est rien ! Le developpeur web ayant deja essaye 
JavaScript et HTML, le codeur confirme familier du C et du XML, le 
designer rode a CSS, tous pourront s’instruire a travers l’application pro- 
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posee en exemple. Chacun y trouvera son interet et pourra s’initier a des 
techniques qui, meme s’il ne les utilise pas dans le cadre de Mozilla, lui 
resserviront plus tard. 

Apres avoir vu JavaScript au travers de cinq chapitres, puis maitrise 
XML ou compris les astuces de CSS, vous serez done capable de repro- 
duce nos modeles et d’utiliser les connaissances acquises, par exemple, 
pour votre site personnel ou celui de votre entreprise. 

L’ouvrage est egalement accessible aux debutants : l’approche croissante 
des difficultes et les nombreux apartes leur permettront de ne pas se 
perdre. 


Structure de I’ouvrage 

Les Cahiers du programmeur suivent une structure tres pragmatique : 
les technologies seront abordees au fur et a mesure du developpement 
d’un cas concret, lorsque cela sera opportun. Nous commencerons done 
par la technologie XXJL, pour fmir par XPInstall, permettant de distri- 
buer l’application une fois fmie. 

Le chapitre 1 presentera en detail les motivations a l’origine de la nais- 
sance de XXJL, la structure du XPFE, sa place au sein du projet Mozilla 
et les differentes briques qui le composent. 

Le chapitre 2, echo concret du premier, decrira l’etude de cas et le role 
de chacune des technologies mentionnees precedemment dans XXJL 
Forum. 

Dans le chapitre 3, nous entrerons dans le vif du sujet avec la creation 
d’un premier fichier .xul ! 

Pour etre plus a notre aise, nous nous installerons directement dans 
l’environnement de Mozilla : ce sera le chapitre 4, celui ou nous creerons 
concretement une extension. 

Mais il ne faut pas negliger XXJL pour autant : nous nous attaquerons 
aux parties les plus ardues de l’interface dans ce chapitre 5. 

Une application professionnelle Test souvent grace aux petits details : 
e’est le role de CSS, qui permet de peaufmer l’interface, qui sera aborde 
dans le chapitre 6. 

Mais tout ceci est bien trop statique ! Pour animer les differents compo- 
sants, JavaScript nous viendra en aide dans le chapitre 7. 

Avec le chapitre 8, e’est du cote du serveur que nous irons, pour voir 
comment engendrer du contenu directement exploitable par XUL, grace 
au modele RDF. 


XIII 
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Le chapitre 9 sera l’occasion dune pause apres deux chapitres intenses : 
nous verrons comment tirer parti des avantages offerts aux extensions 
par Mozilla. 

Le chapitre 10 sera un peu particulier : il presentera l’interaction entre 
Mozilla et les services d’annuaire LDAP. II vous sera possible de ne pas 
le lire si vous etes trop use par les precedents et si tout cela ne vous tente 
guere : dans la version finale et testable sur le site du projet, ce meca- 
nisme ne sera pas present. Si, par contre, vous etes en entreprise, si vous 
avez l’habitude de cette technologie, ou si, tout simplement, vous en etes 
curieux, alors n’hesitez pas, devorez-le ! 

Le chapitre 11 sera en quelque sorte un condense de tout ce qui a ete vu 
precedemment : XBL, ou comment creer vos propres elements graphi- 
ques {widgets). 

Le chapitre 12 apportera plus de communication entre applications par 
le biais des services web, dialogue reciproque entre client et serveur. 

Enfin, puisque tout vise a etre fonctionnel, nous pourrons distribuer 
notre application grace au chapitre 13, en l’empaquetant et en redigeant 
les fichiers decrivant la procedure d’installation. Ce sera alors une 
« vraie » extension .xpi ! 

Les differentes annexes permettront d’approfondir plus encore votre 
experience XUL : 

• Les modifications attendues de la prochaine version 1.5 de Firefox et 
XULRunner. 

• Les composants XPCOM utilises, ainsi que ceux qui pourront servir 
un jour. 

• La liste complete des fichiers de l’application, pour ne pas s’y perdre ! 

• Les references XUL et CSS, pratiques en cas d’oubli. 


Pour aller plus loin 

Les differentes versions de XUL Forum 

Vous retrouverez souvent au fil du texte des remarques intitulees « Pour 
aller plus loin ». Elies ouvrent generalement la voie a des ameliorations 
possibles du code, mais non decrites dans le livre. Beaucoup de ces 
ameliorations seront disponibles sur xulforum.org : il y aura en effet 
trois versions du code source. La premiere sera le code tel que le lecteur 
pourra le trouver a la fin du chapitre 13. La seconde sera le code ame- 
liore, avec la plupart des possibility « Pour aller plus loin » integrees. 
Ces deux versions integreront le support LDAP. Une derniere version 
supprimera ce support, transformant ainsi XUL Forum en application 
fonctionnelle et installable en tant que xpi. 
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Pour aller plus loin 

Une fois que vous aurez lu ce Cahier, vous pourrez tester directement 
XUL Forum a l’adresse www.xulforum.org, recuperer des extensions adap- 
tees a votre version du navigateur et meme les codes source decrits dans 
le livre ! Le forum sera d’ailleurs une tres bonne occasion d’en parler... 

A Tissue de cette lecture, vous pourrez manier sans probleme les princi- 
paux langages qui formeront le Web de demain et developper de 
superbes clients riches en les couplant a Mozilla ! 


Jonathan PROTZENKO 

jonathan@xulforum.org 
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Introduction a XUL 


Les applications web sont, depuis le developpement de 
l’lnternet, une solution de choix dans la conception de 
nouvelles applications, au meme titre que les clients lourds 
ecrits en C ou en C++. 

Comment XUL permet-il de developper une application dans 
un contexte web tout en combinant des avantages inaccessibles 
a du simple HTML ? 


SOMMAIRE 

► Mozilla et XUL : une histoire 
intimement liee 

► La place de XUL dans le 
framework Mozilla 

► Les avantages de XUL 

MOTS-CLES 

► XPFE 

► XPCOM 

► Portability 
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Depuis le developpement spectaculaire qu’a connu l’lnternet dans la 
derniere decennie, deux grands types de solutions s’offrent au deve- 
loppeur pour la conception de son application graphique. Une applica- 
tion web, ecrite en HTML, combinant des CSS et du JavaScript, 
permet d’achever le projet rapidement sans exiger du developpeur des 
competences longues et difficiles a maitriser. Cependant, il faut faire 
appel a un client lourd (ecrit en Java, en C, etc.) si Ton veut que l’utilisa- 
teur puisse effectuer des actions complexes, comme interagir avec le sys- 
teme de fichiers, disposer des fonctions de glisser/deposer, ou meme 
utiliser des elements graphiques plus riches. L’emploi de telles techni- 
ques est bien sur plus agreable pour l’utilisateur, mais plus difficile a 
mettre en oeuvre pour le developpeur. 

XUL apporte une reponse a ce dilemme : fonde sur les nouvelles techno- 
logies du Web, il permet d’aller beaucoup plus loin que les simples sites 
en HTML, sans pour autant necessiter un apprentissage difficile ou une 
mise en oeuvre complexe. Nous allons essayer de comprendre comment 
ce langage a ete cree et pourquoi il peut apporter une solution pour le 
developpement de nouvelles applications riches. 


Mozilla et XUL 


Historique Mozilla, pourquoi ce nom ? 

Mozilla etait le nom interne utilise par Netscape 
pour designer son navigateur. Mozilla est la con- 
traction de « Mosaic Killer », Mosaic etant le pre- 
mier navigateur Internet grand public. L'objectif de 
Netscape etait justement de le detroner. 


Par ellipse, on parle communement de « XUL », en oubliant que ce lan- 
gage est utilise avec d’autres technologies et, surtout, qu’il fait partie 
integrante de ce que Ton peut appeler le framework Mozilla. Il ne peut 
en etre detache, c’est pourquoi un petit historique s’avere necessaire. 
Comment et pour quelles raisons XUL a-t-il fait son apparition dans ce 
qui ne devait etre au depart qu’un navigateur web ? 

Un point de depart : le code source de Netscape 

L’histoire du projet Mozilla, debute en mars 1998, lorsque Netscape 
decide d’ouvrir une grande part du code de la suite Netscape Communi- 
cator a la communaute Open Source : le communique de presse annonce 
une disponibilite du code sous une licence libre, pour profiter de « la 
puissance creatrice de nombreux developpeurs [...] qui apporteront leurs 
ameliorations ». Un petit groupe de passionnes se constitue alors autour 
de ce code de base et se charge de coordonner les efforts venant a la fois 
de Netscape et de la communaute du Logiciel Libre. 
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Des problemes (revolution 

Cependant, le code de Nestcape se revele vite difficile a maintenir. Par 
exemple, la prise en charge des elements <frameset> ou <optgroup> de 
HTML 4.0 requiert un travail parallele pour chaque environnement 
supporte : Microsoft Windows, Linux ou Mac OS. Tous ces inconve- 
nients ont decide les developpeurs Mozilla a abandonner le moteur de 
rendu original au profit du nouveau moteur developpe par les equipes de 
Netscape appele new generation layout ou NG Layout. 

Meme si le nom du projet est demeure « NG Layout », le moteur est 
ensuite devenu Gecko. Ses developpeurs se sont donne pour but de le 
rendre plus puissant, plus leger et plus rapide que son predecesseur. La 
premiere version officielle a ete publiee par Netscape en 1998 et pouvait 
tenir sur une disquette ! Gecko symbolise l’influence de la communaute 
Open Source : il a ete des le depart pense pour etre compatible avec les 
standards du Web et meme si Netscape ne l’a pas adopte tout de suite, il 
reflete une volonte de la part du monde du Logiciel Libre d’avoir enfin 
un navigateur respectueux des recommandations du W3C. 


B.A. BA Moteur d'un navigateur 

Le moteur de rendu est la partie du navigateur qui 
se charge de « dessiner » la page web, c'est-a-dire 
de tracer les elements de formulaire ou d'afficher 
les images au bon endroit. Plus generalement, le 
moteur de Mozilla combine a cette fonction de 
rendu I'analyse du document (appelee le par- 
sing), la gestion des styles, ou I'acces a la struc- 
ture du document via le DOM (Document Object 
Model). II a de plus ete congu pour etre embarque 
dans des applications tierces. 


Historique Archives de Mozilla.org 

Cette page est consacree a I'ancien moteur de rendu. Si vous lisez la page relative au tra- 
vail a effectuer pour supporter HTML 4.0, vous comprendrez pourquoi les developpeurs 
ont voulu changer la structure interne de Mozilla ! Implementer I'element <iframe> 
etait estime a trois semaines de travail... 

► http://www.mozilla.org/classic/layout-classic/ 


Un nouveau moteur et une nouvelle architecture 

Toujours dirige par Netscape, le projet Mozilla s’est egalement trouve 
confronte a un autre probleme : une suite constituee d’un navigateur, 
d’un client de courrier electronique et d’un editeur HTML ne pouvait 
reposer sur le seul moteur de rendu. Autrement dit, meme si Gecko etait 
un projet tres prometteur et sur lequel Mozilla fondait ses espoirs, la 
modularite et l’evolutivite de la suite n’etait pas au rendez-vous. La 
encore, l’organisation du code de Netscape et la difficulte de le faire evo- 
luer, meme avec le NG Layout, ont conduit l’equipe de developpement a 
repenser totalement Mozilla. Ils ont contpr un projet plus ambitieux 
encore : realiser une plate-forme generique de developpement duplica- 
tions capable d’accueillir un client de courrier, un editeur HTML et, 
naturellement, un navigateur. Cette reorganisation du code est devenue 
le XPFE : Cross Platform Front-End. 
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Historique Roadmap fin 1998 

Voici la roadmap, autrement dit les orientations definies pour le projet Mozilla en octobre 
1998. Ce document marque un tournant radical dans la politique de developpement : 
c'est en effet a cette date qu'a ete prise la decision d'abandonner I'ancien code de 
Netscape et de se reposer desormais sur XPFE et Gecko. 

► http://www.mozilla.org/roadmap/roadmap-26-Oct-1998.html 


Culture Citation 

La citation toujours mentionnee dans un livre sur 
XUL se trouve a cette adresse. Elle explique pour- 
quoi les developpeurs ont decide d’abandonner 
I'ancien systeme de rendu : « In the beginning, 
there were three frontends (...). Each took a suite 
of developpers to maintain... ». 

► http://www.mozilla.org/xpfe/ 
ElevatorTouchyFeely.html 


XPFE, couple au moteur Gecko, represente done la reponse des deve- 
loppeurs Mozilla a tous les problemes rencontres auparavant. Conipi des 
le depart pour etre multi-plates-formes, XPFE, une fois acheve, devien- 
drait la solution revee des developpeurs ! 

Un projet ambitieux qui a reussi 

Ce projet, accueilli parfois avec scepticisme, a tenu ses objectifs : Mozilla 
s’est detache de Netscape suite au rachat de ce dernier par AOL. C’est 
maintenant la Mozilla Foundation, organisation a but non lucratif, qui 
gere le projet, en apportant un support financier et un cadre legal pour 
faire vivre le lezard rouge, embleme de Mozilla. 

Entre temps, des milestones (sorties du logiciel precedant une version 
importante, destinees aux dernieres phases de test) se sont succedees 
avant de voir enfm apparaitre en decembre 2000 la premiere « vraie » 
version de Mozilla, la version 0.6, sous le nom de code SeaMonkey. 
Mozilla en est maintenant a sa version 1.8 et la fondation accueille 
d’autres projets paralleles : des navigateurs alternatifs, un projet 
d’agenda, un client de courrier electronique independant... et le site 
mozilla.org est toujours aussi actif ! 


Attention Mozilla et SeaMonkey 

Dernierement, la fondation Mozilla a decide d'abandonner le support 
« off iciel » du produit « Mozilla Suite ». La suite Mozilla est done 
devenue SeaMonkey (reprenant le nom de code original), un projet gere 
par la communaute et profitant du soutien logistique de la Fondation 
Mozilla (machines de test, serveur cvs...). La Fondation Mozilla n'assure 
plus que les mises a jour de securite de la branche 1.7 et ce qui devait 
etre la branche 1.8 sera SeaMonkey 1.0, le projet communautaire. 

Dans cet ouvrage, commence alors que SeaMonkey n'avait pas encore 
vu le jour, c'est surtout le terme de « Suite Mozilla » qui sera employe. 
En annexe A, vous retrouverez une copie d'ecran de SeaMonkey. 
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Figure 1-1 

http://filemanager.mozdev.org/ 
vous propose une interface de 
gestion de fichiers similaire a 
I'explorateur de Windows 


Figure 1-2 

Mozilla Amazon Browser, une autre 
application souvent citee en exemple, 
permet de consulter le site de vente 
en ligne Amazon via une interface XUL 
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Maintenant, Gecko est integre dans de nombreuses applications : 
Firefox, Sunbird (projet de calendrier autonome), Thunderbird, mais 
aussi un editeur XHTML comme NVU ou encore Galeon, un naviga- 
teur integre a l’environnement de bureau GNOME. L’architecture 
XPFE est stable et sert de plate-forme de developpement pour tous ceux 
qui veulent creer des clients riches en utilisant les standards du Web et la 
puissance d’un logiciel Open Source : on pourrait citer en exemple le 
File Manager de la societe Anisolution qui est le « sommet de l’art en 
XUL » : la copie d’ecran parle d’elle-meme. 


Culture Gecko la oil on ne I'attend pas 

Deux exemples d'utilisation exceptionnelle de Gecko, preuve qu'il ne faut pas reduire le 

celebre moteur de rendu a un contexte web : 

• MozillaZine (le magazine sur I'actualite de Mozilla) annonce une version serveur (non 
graphique) pour Gecko : a partir de documents XHTML, le moteur rend un fichier 
PostScript ( . ps), en utilisant le meme mecanisme que pour une impression classique. 
Ce fichier PS peut ensuite etre converti en PDF, JPEG... 

► http://www.mozillazine.org/talkback.html?article=6927 

• SymphonyOS, une distribution Linux fondee sur la distribution Knoppix (elle-meme 
fondee sur Debian), a decide d'axer son developpement sur la meilleure experience 
utilisateur possible. Elle a pour ce faire developpe son propre « desktop 
environment » et son propre environnement applicatif... con^u sur Mozilla ! On 
retrouve bien sur XUL, CSS, JavaScript... qui servent a creer un bureau de conception 
tres originale et permettent le developpement duplications tierces comme un pan- 
neau de controle. 

► http://symphonyos.com/mezzo.html 

► http://symphonyos.com/orchestra.html 


La place de XUL au sein du XPFE 

Mozilla s’est done progressivement transforme : dune simple recriture 
de Netscape Communicator, le projet est devenu un framework applicatif, 
un environnement pour accueillir des applications. Si certaines de ces 
applications sont bien connues, tels le client mail, le module de chat IRC 
integre appele ChatZilla ou l’editeur HTML, sans oublier le navigateur 
lui-meme, le framework XPFE vous permet de creer vos propres applica- 
tions destinees a etre utilisees avec Mozilla. C’est ici que XUL intervient 
puisqu’il est Fun des differents Engages utilises au sein du XPFE. 
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XUL : un langage qui ne s’utilise pas seul 

XML est utilise pour decrire la structure d’un document. XUL, pour 
XML User interface Language , sera utilise pour decrire la structure de 
l’application. Le parallele entre les deux est tres proche : on pourrait dire 
que XUL est une application du XML aux interfaces graphiques. 

II faut bien comprendre le role de XUL : c’est un langage qui se charge 
de la construction de l’interface graphique. XUL seul ne permet de rea- 
liser que la structure de l’application : le placement des differents 
elements, leurs attributs et leur organisation spatiale permettent de creer 
une application statique. Pour rendre l’application vivante et permettre a 
l’utilisateur d’interagir avec elle, il faut decrire les actions et les compor- 
tements. Ces aspects ne sont pas pris en compte par XUL, mais reposent 
sur un langage de script. 


Exemple francise montrant la logique XUL 

<fenetre> 

<boTte> 

<zonedetexte nom="maZoneDeTexte" /> 
<bouton titre="Voici mon bouton !" /> 
</boi te> 

</fenetre> 


B. A.-BA XML 

XML signifie extensible Markup Language, autrement dit, un lan- 
gage a balises. XML n'est pas en lui-meme un langage, c'est plutot 
un format d'echange de donnees. On parle alors de meta-langage : 
un ensemble de regies qui permettent de definir un langage. 
XHTML, reformulation de HTML selon XML, est un exemple de lan- 
gage defini a partir des regies de XML. 

<?xml version="1.0" ?> 

<cahiersduprograinmeur> 

clivre sujet="XUL" auteur="]onathan" /> 
clivre sujet="PHP5" auteur="Stephane" /> 
</cahiersduprogrammeur> 

XML est par definition lisible par un humain : les balises (ou tags 
en anglais) tels que <1 f vre /> parlent d'elles-memes. II est bien 
sur possible de produire du XML incomprehensible en compliquant 
sa syntaxe, mais alors pourquoi ne pas utiliser tout simplement un 
format proprietaire ? 

XML est une recommandation du W3C. II est facilement utilisable 
par les developpeurs car il existe des fonctions de manipulation XML 
pour tous les langages : par exemple, la bibliotheque Iibxml2 sert au 

C, mais on en trouve aussi pour PHP, Java, JavaScript ou Perl. 


On parlera d’element pour designer une balise et son contenu 
(exemple : <livre> La technologie XUL... </livre>). 
Le nom des balises est entierement libre et chacun peut choisir de 
definir son fichier XML comme bon lui semble. Cependant, XML 
obeit a quelques regies strides : 

• une balise ouverte <1 f vre> doit toujours etre fermee, soit par 
</livre>, soit directement en s'ecrivant<lfvre /> ; 

• les attributs sont en minuscule : <1 f vre auteur="" /> et 
leur valeur est toujours placee entre guillemets doubles ; 

• un encodage doit etre specifie, ou, par defaut, le fichier doit 
etre encode en Unicode. 

Ce langage de balises (et non pas langage de programmation !) 
sera utilise durant tout le long du livre. Nous verrons plus en avant 
qu'il existe des moyens de definir la structure d'un fichier XML (les 
balises que I'on doit y retrouver, leur ordre, les attributs qu'elles 
proposent), comme une DTD ou un Schema XML. 

Pour plus de details, voir : 

£Q XML, la reference, aux editions O'Reilly. 
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Le choix des developpeurs s’est porte sur un autre grand standard du 
W3C : ECMAScript, norme dont Implementation la plus connue est 
le JavaScript. Ainsi on pourra positionner une zone de texte avec XUL et 
valider son contenu avec JavaScript. 

II est aussi interessant de pouvoir agir sur l’apparence de l’application : 
taille ou format du texte sont, par exemple, des attributs que Ton ne doit 
pas defmir avec XUL, qui ne doit s’occuper que de la structure du docu- 
ment. Ainsi, un autre standard quasi indispensable dans une application 
XUL est CSS (Cascading Style Sheets). CSS vous permettra de con- 
troler l’aspect de votre application, les couleurs, la taille des elements, les 
images notamment, mais aussi d’autres composants plus complexes que 
vous decouvrirez tout au long de ce livre. 


Culture Utilisations de XUL 

XUL est done au coeur d'une plate-forme pour le 
lancement duplications. Dans les dernieres 
versions milestone de Mozilla, une application 
« console » etait livree avec le navigateur. Codee 
en XUL, elle implementait quelques fonctions de 
base comme la commande 1 s du shell. Ceci visait 
a montrer que Mozilla n'etait pas limite au 
contexte web. De meme, vous pouvezjoueren XUL 
si vous le desirez avec les jeux de : 

► http://games.mozdev.org 


Figure 1-3 Un serpent en XUL I 



B.A.-BA RDF 

RDF signifie Resource Description Framework. C'est 
un standard qui permet de produire des documents 
XML contenant du sens : la oil une page HTML ne 
contient que du texte sans organisation, un docu- 
ment RDF a un contenu structure, qui permet a une 
machine d'analyser le document et de lui associer 
une structure logique. Ceci n'est qu’un bref apergu 
de RDF, nous le detaillerons au chapitre qui y est 
consacre. 


Les technologies connexes a XUL, CSS et JavaScript 

Mozilla est certainement sur le marche un navigateur parmi les plus res- 
pectueux des standards, c’est pourquoi il est possible et meme recom- 
mande d’en tirer pleinement parti. Comme les fichiers XUL sont au 
depart des fichiers XML, vous pourrez utiliser diverses DTD pour 
defmir des entites qui serviront a l’internationalisation, ou bien encore 
RDL. RDL (voir ci-contre) peut etre utilise pour creer automatiquement 
du XUL, acceder a des donnees internes comme les favoris internet, 
l’historique des sites consul tes, etc. Nous en verrons plus au chapitre 
consacre a ce sujet. 
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D’autres langages fondes sur XML font egalement partie du XPFE : 
nous en decouvrirons un appele XBL plus loin dans ce livre. 


B.A.-BA DTD 

DTD ou Document Type Definition est un standard qui permet de decrire la structure d'un 
document XML. La validation d'un document XML permet de voir s'il est conforme a sa DTD. 
II existe, par exemple, des DTD pour les differentes versions du XHTML. Pour XUL, une DTD 
servira surtout a definir des entites. En XHTML, une entite est par exemple &eacute ; . Avec 
XUL, une entite sera &ti treDeMaFenetre ; et sera « My Window » ou « Ma 
Fenetre », selon la langue : nous approfondirons ce concept plus loin. 


Organisation generate du XPFE 

Apres avoir vu les technologies liees au XPFE, nous allons voir la struc- 
ture interne du XPFE, autrement dit comment s’organisent les diffe- 
rentes parties de ce grand ensemble (voir figure 1-4, page suivante). 

Au centre du XPFE se trouve XXJL. II est intimement lie a JavaScript : 
les evenements crees par XXJL appellent du JavaScript et vice versa, une 
fonction JavaScript peut modifier la structure du document XXJL. Les 
interactions JavaScript/XXJL se font par l’intermediaire du DOM (Docu- 
ment Object Model). Le rendu d’un document XXJL est quant a lui a la 
charge de Gecko, le moteur de Mozilla : ce dernier analyse le document 
XXJL, le dessine sur le systeme d’affichage du client et prend egalement 
en charge les modifications apportees au document XXJL via DOM. 

Ceci constitue en quelque sorte la partie visible de l’iceberg qu’est 
Mozilla : ce sont les elements que manipule directement le developpeur 
lorsqu’il utilise XXJL. Cependant, Mozilla n’est pas programme entiere- 
ment en JavaScript. Enregistrer les preferences de l’utilisateur sur le 
disque n’est pas une tache directement realisable en JavaScript. C’est 
pourquoi Mozilla dispose de parties en code natif, utiles pour se con- 
necter a un serveur distant par exemple. Ainsi, si vous essayez d’obtenir 
des informations sur une methode pour appeler une fonction SOAP, 
vous obtiendrez une fonction de type native code. Ce sont des composants 
XPCOM. Un composant XPCOM possede une interface fixe, qui sert de 
point de contact pour les autres langages et son implementation peut 
varier en fonction de la plate-forme. Pour se connecter a un serveur via les 
sockets , il existe des interfaces dont le nom et les methodes sont fixes et 
ensuite, pour chaque plate-forme il y a du code. Ces interfaces sont acces- 
sibles par JavaScript (via la technologie XPConnect), mais pas seulement. 
Un composant XPCOM peut aussi etre accessible a un autre langage : il 
existe par exemple PyXPCOM pour acceder aux composants de Mozilla 
depuis Python. 
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Figure 1-4 

[.'organisation generale du XPFE 



II existe des composants pour tout : services web, services d’annuaire 
LDAP, messagerie (notamment les communications avec un serveur 
POP), etc. II y a meme un projet de composant pour inclure la con- 
nexion a des bases de donnees MySQL ou PostgreSQL via XPCOM, 
accessible par JavaScript ! Vous pouvez bien sur creer vos propres com- 
posants, en C++ si vous voulez etre plus proche du systeme, ou en 
JavaScript si vous n’avez pas besoin de fonctions avancees. 

L’ensemble du code qui concerne les protocoles reseau est integre dans 
Necko, la Networking Library de Mozilla. En outre, le code utilise 
NSPR, Netscape Portable Runtime, un ensemble destine a rendre les 
operations les plus courantes (comme la gestion des entrees/sorties ou 
des threads) independantes de la plate forme : il s’agit done dune couche 
d’abstraction. 
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En resume, sur la base du NSPR se situent les composants XPCOM, 
dont 1’implementation peut varier en fonction de la plate-forme, mais 
qui ont des interfaces normalisees. Ces composants peuvent utiliser la 
bibliotheque reseau Necko et sont accessibles depuis un autre langage 
comme JavaScript. JavaScript peut interagir a la demande de XUL avec 
XPCOM mais aussi avec le moteur Gecko, via le DOM. Le moteur 
Gecko se charge finalement d’afficher le document XUL, en prenant en 
compte les technologies connexes, comme CSS. 

Cette introduction, peut-etre un peu longue, est neanmoins tres impor- 
tante dans un ouvrage sur XUL. En effet, il n’est pas possible de conce- 
voir XUL simplement comme un XML « ameliore » permettant de creer 
une interface graphique (GUI). XUL est une technologie au coeur d’un 
ensemble ; elle n’est qu’une fraction de l’immense framework Mozilla. 


Alternatives Client leger et client lourd 

Nous presentons les avantages de XUL. II reste cependant quelques cas ou XUL ne peut 
pas etre la « solution miracle ». 

Pour mettre en ceuvre une interface web simple, sans capacite particuliere, le couple 
HTML (avec eventuellement un peu de JavaScript) ou un langage dont le code sera exe- 
cute par le serveur reste toujours aussi efficace, simple et rapide a implementer. 
Inversement, pour developper une application tres proche du systeme, XUL ne sera pas 
non plus le mieux adapte : sa portability I'empeche justement de se rapprocher trap des 
composants fondamentaux. II faudra alors se tourner vers d'autres langages plus 
eprouves, notamment C/C++, ou beneficier de XUL en proqrammant des composants 
XPCOM ! 

Mais a moins d'etre dans I'une de ces situations « extremes », il y a aura toujours une 
bonne raison d'utiliser XUL ;). 


Pourquoi choisir XUL ? 

En effet, au-dela du cote standard, Open Source et « bonne image » de 
Mozilla, pourquoi finalement ne serait-il pas plus utile de developper 
une application graphique en utilisant par exemple C++, du code natif, 
ou encore un client leger agremente d’un peu de DHTML ? Les qualites 
de XUL sont pourtant determinantes. 

Un langage facile a apprendre 

XUL, fonde sur XML, offre la garantie que le code sera toujours com- 
prehensible car les differents tags sont parlants : window , button ou tree 
sont des elements aisement comprehensibles, meme avec seulement 
quelques rudiments d’anglais. 
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Alternative xaml 

Microsoft, dans la future version de son systeme d'exploitation Longhorn, propose de 
reprendre le concept de description d'interfaces graphiques avec XAML (prononcez : 
« Zammel »), une description XML qui elle aussi decrirait des interfaces mais serait inte- 
gree directement avec WinFX (successeur de I’API Win32), au cceur meme du systeme 
d'exploitation. Cependant, cette technologie n'a pas ete eprouvee et ressemble fortement 
a XUL. Beaucoup pretendent en effet que XAML serait la version XUL proprietaire de 
Microsoft et, dans ce cas, XUL court le risque d'etre ecrase par la puissance de I'editeur 
de Redmond. C’est pourquoi, il y a differents projets d'integration de XUL dans un envi- 
ronnement graphique, avec notamment son utilisation pour le projet GNOME (un des 
deux principaux environnements graphiques sous Linux), ou KaXUL, pour creer des 
fichiers natifs KDE, I'autre principal environnement graphique libre, a partir de XUL. Tous 
deux permettraient d'apporter une reponse a la nouvelle technologie developpee par 
Microsoft. Pour ses defenseurs, XUL est une technologie mature qui a besoin maintenant 
des efforts de la communaute. 


Retour d'experience LeMonde.fr 

Dans une interview donnee au Journal du Net, le 
directeur informatique du site lemonde.fr 
indique que la migration d'une solution proprie- 
taire sous Solaris vers une solution PHP pour le site 
et XUL pour la partie backend a apporte un 
nombre important d'ameliorations au service. 


Les autres technologies comme JavaScript seront deja familieres a la plu- 
part des lecteurs ayant travaille en environnement web ; pour les autres, 
elles ne demanderont qu’un apprentissage minime. Le seul point delicat 
est la couche objet du JavaScript. La ou, dans un projet web, quelques 
lignes procedurales suffisent dans la plupart des cas, dans un projet 
XUL, la majeure partie de la programmation sera en JavaScript objet, 
pour des raisons de clarte et d’efficacite. 


Google a aussi une version XUL 

► http://www.google.com/mozilla/google.xul 


Retour d'experience Les nombreux cas 
d'utilisation de la plate-forme Mozilla 

Sur le lien qui suit, vous pourrez voir les principaux 
projets recenses par Mozilla.org reutilisant le 
XPFE. Beaucoup integrant Gecko, quelques-uns 
reprennent la totalite du XPFE. Lorsque vous aurez 
parcouru la liste, vous realiserez que Mozilla est 
partout I 

> http://www.mozilla.org/university/ 
HOF.html 


Portable 

Les problemes de portabilite sont completement masques lors du develop- 
pement d’une application XUL. II n’existe quasiment aucun code depen- 
dant de la plate-forme, les composants XPCOM proposent les memes 
interfaces sous tous les systemes et la plate-forme Mozilla est disponible 
sur un nombre impressionnant de systemes. On peut ainsi telecharger des 
binaires de Firefox pour Microsoft Windows, Mac OS, Linux et autres 
unices comme AIX, OS/2, Solaris ainsi que la famille des BSD. 

Sans limite ! 

Lorsque vous vouliez utiliser DHTML pour vos developpements web, 
vous aviez a jongler entre les fonctions tres diverses des differentes 
families de navigateurs : combien de problemes de realisation entre le 
document. all d’Internet Explorer, la necessaire compatibilite avec 
Netscape et ses implementations etranges de JavaScript, la specificite de 
Mozilla qui gere le modele evenementiel du DOM (contrairement a 
Internet Explorer) ! Tous ces problemes appartiennent desormais au 
passe puisque Mozilla implemente parfaitement le support de JavaScript 
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Alternative ajax 

Une alternative qui monte en ces temps d'intense communication 
client/serveur est AJAX : Asynchronous JavaScript And XML. Com- 
ment se structure cette methode ? D'abord, le client, a I'aide d’un 
objet XMLHttpRequest (nous le verrons au chapitre sur JavaS- 
cript), envoie une requete au serveur. Le serveur repond sous 
forme de contenu XML. La reponse est analysee par le client et, a 
I'aide de JavaScript, de CSS et de HTML, ce dernier modifie dyna- 
miquement I'interface sans recharger integralement la page web. 
C'est done une technique qui s'execute dans le navigateur et qui 
fait appel a du DHTML (Dynamic HTML). C'est ainsi que fonctionne 
I'application de courrier de Google Gmail. 

Cette solution peut sembler fort efficace, neanmoins il faut avoir 
conscience de ses limites : 

• de tres gros problemes de compatibility : GMail par exemple 
ne propose la version dynamique que pour les navigateurs de 
derniere generation (comme Safari, Firefox ou Internet 
Explorer 6). Les navigateurs plus anciens se voient proposer 
une version HTML plus simple du site. 


• HTML n'est pas adapte a la construction d'interfaces graphi- 
ques. Meme s'il est possible de reproduire le comportement 
d'une interface riche, HTML est avant tout un langage de pre- 
sentation et non pas un langage de description d'interfaces uti- 
lisateur. 

• une complexity sous-jacente : I'utilisation intensive d'XML et 
les jongleries entre les differentes implementation du DOM 
induisent une complexity importante. Songez, en regard, a la 
simplicity d'un remplissage par source RDF... que nous verrons 
au chapitre eponyme ! 

AJAX est certes prometteur mais souffre de nombreuses limita- 
tions, notamment du fait qu’il s'appuie sur les fonctions du navi- 
gateur web et sa capacity a interpreter du HTML pour construire 
des interfaces graphiques. Or, HTML n'a pas ete con^u pour cet 
usage ; pour preuve, la complexity que tous rencontrent pour 
representer un simple arbre hiera rchique en HTML. 


et des CSS et ce surtout d’une maniere maintenant uniforme. II est en 
outre possible d’aller beaucoup plus loin avec XUL : les nombreuses API 
SOAP, WSDL, XML-RPC, LDAP ou POP en font un parfait candidat 
des lors qu’il s’agit d’interagir avec d’autres systemes dans un environne- 
ment heterogene. 


En resume... 

Nous avons vu dans ce chapitre que : 

• Mozilla s’est transforme ; d’une simple recriture, le projet est devenu 
une plate-forme pour l’execution d’applications complexes 

• L’ensemble des technologies permettant l’execution d’applications 
s’appelle le XPFE. 

• XUL est la technologie permettant de creer une interface graphique 
et s’utilise avec d’autres standards comme CSS, JavaScript, etc. 

• Les avantages de XUL sont nombreux : portability, respect des stan- 
dards, facilite de mise en oeuvre. 

Nous pouvons done maintenant nous interesser a l’etude de cas et com- 
mencer a organiser notre travail. 
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► Modularity 

► Larges possibilites 

► Professionnalisme 
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Les applications communautaires sont en general les plus attractives : 
ChatZilla, le client IRC integre dans la suite Mozilla en est un exemple. 
II est toujours plus amusant de developper une application reliant des 
personnes differentes, ne serait-ce que pour se sentir moins seul lors des 
phases de test ! Un service de liste de membres, d’annuaire communau- 
taire serait une idee, mais serait peut-etre un peu trop classique et pas 
assez etendu. Un forum alors ? Un forum combinerait plusieurs modules 
et utiliserait plusieurs technologies. 


Introduction 

Le but de cette application est de mettre en jeu les differentes possibi- 
lity offertes par le XPFE, tout en gardant un contenu capable de satis- 
faire aux differents criteres dune application professionnelle. 

Le forum combinerait les elements suivants : 

• avant toute chose, la prise en charge des fonctions d’inscription ; 

• l’identification des utilisateurs pour acceder au forum ; 

• la consultation du contenu du forum : navigation dans les differents 
sujets, lecture et modification des messages ; 

• la liste des membres : acces a la liste des membres du forum, acces 
aux informations les concernant. 

Nous developperons XUL Forum sous forme d’extension Mozilla ou 
Firefox, pour des raisons de commodite (il y a plus de Hmitations quand 
on sort du cadre « interne » du navigateur). De ce fait, notre application 
reposera sur un serveur, qui centralisera toutes les demandes venant des 
utilisateurs ayant installe l’extension : lecture, ecriture, rapatriement 
d’informations, etc. ; le tout soutenu par une base de donnees (dans notre 
cas, MySQL). Notre serveur sera anime par le langage PHP et nous 
decrirons les traitements cote serveur au fur et a mesure des chapitres. 

L’ application sera destinee a etre lancee dans une fenetre separee, soit via 
une entree de menu, soit en creant un raccourci special, utilisant l’option 
de la ligne de commande -chrome, qui « cachera » la fenetre du naviga- 
teur pour ne faire apparaitre que l’extension. Nous reverrons ceci au cha- 
pitre suivant lorsque nous aborderons les differents moyens d’acceder a 
l’extension, une fois la premiere page integree. 
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Principe de fonctionnement d’un forum 

Dans la jungle des nouveaux moyens de communication, que ce soit 
messagerie instantanee ou blogs, on retrouve l’idee des forums. Les 
forums sont des espaces oil les utilisateurs peuvent poster des messages, 
organises le plus souvent en sujets : a chaque sujet, il est possible de 
repondre en laissant un message, creant ainsi une structure hierarchique 
qui permet un premier tri ordonne. 

Un forum contient generalement une liste des utilisateurs et restreint 
l’acces a certains privileges aux seuls membres enregistres. Certains 
forums se limitent a l’aspect discussion, d’autres developpent davantage 
un aspect communautaire en proposant des services complementaires, 
comme l’echange de messages directs entre membres. XUL Forum se 
situera entre les deux : il proposera des services pour rendre le forum plus 
accueillant (liste des membres dans le but de constituer une commu- 
naute) sans pour autant perdre de vue sa vocation premiere qui est 
dechanger des messages entre inscrits. 


Alternatives Les forums HTML 

II existe des dizaines de forums, souvent gratuits, 
programmes en PH P/MySQL, en Perl ou autre, avec 
une sortie HTML. Cependant I'experience utilisa- 
teur est meilleure avec une interface riche Mozilla : 
au lieu d'une mise en forme « presentationnelle », 
on dispose d’une veritable application, avec des 
menus, des boutons, des zones de texte, des 
arbres, etc. 



Figure 2-1 

Un exemple de forum, avec la 
hierarchie de messages 
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Le fonctionnement de XUL Forum 

La vocation premiere de XUL Forum est de permettre des discussions 
entre internautes. L’utilisateur devra tout d’abord etre capable de lire les 
messages des autres participants. 

L’identification est necessaire, notamment en ce qui concerne l’acces au 
service et l’envoi des messages. II sera ainsi possible d’associer a chaque 
message son auteur et done de permettre a l’utilisateur de modifier ses 
propres messages. De plus, la phase d’inscription prealable permettra de 
remplir la liste des membres du forum, liste consultable par tous les mem- 
bres. Cette liste fournira des informations personnelles sur chaque inscrit : 
e-mail, age, nom, etc. 

II y aura done quatre fonctions principales : inscription, identification, 
lecture/modification/ajout d’un message, informations sur les membres. 
A chacune de ces fonctions va correspondre une partie de l’interface : 
e’est ce que nous allons etudier maintenant. 


Les differents modules 


Pour aller plus loin 

II serait bien sur possible de recreer la page 
d'inscription en XUL et de I'integrer directement 
a I'extension. Ce sera un tres bon exercice, une 
fois la lecture de I’ouvrage terminee. 


[.'inscription 

La premiere etape pour un fiitur membre du forum sera son inscription. 
Le cote communautaire du forum n’est valable que si les membres 
« s’impliquent » dans le forum ; e’est pourquoi nous avons choisi de ne 
pas laisser un anonyme poster de messages : un inconnu doit, s’il veut 
participer, s’inscrire ! 

Son inscription permettra de constituer sa fiche, qui ira remplir 
Fannuaire du forum. Les autres visiteurs pourront la consulter. Elle four- 
nira son nom, sa photo, sa localisation. 

L’inscription pourra se faire directement sur le serveur via une page web 
en PHP. Vous pourrez retrouver cette derniere sur le site du projet, car 
nous n’aurons pas Foccasion de detailler, dans un ouvrage consacre a 
XUL, les fonctions de cette page PHP ! 


L’identification 

Une fois inscrit, Futilisateur devra s’identifier a l’aide de son nom d’utili- 
sateur et du mot de passe choisi lors de Finscription. Ce sera pour lui le 
premier contact veritable avec XUL Forum, la premiere page XUL qu’il 
verra. Cet ecran sera accessible depuis le forum a proprement parler, si 
jamais Futilisateur a besoin de s’identifier sous un nom different. 
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L’identification, de meme que la liste des membres, seront gerees par un 
serveur LDAP (un service d’annuaire offrant des fonctions d’identifica- 
tion), avec qui nous communiquerons par l’intermediaire de l’extension 
LDAP de Mozilla. Cette utilisation de LDAP est cependant facultative. 
Dans cet ouvrage, nous decrirons XUL Forum dans sa version avec 
LDAP, mais, pour l’offrir au plus grand nombre d’utilisateurs, une ver- 
sion sans LDAP sera fonctionnelle et disponible sur le site du projet. 


B.A.-BA LDAP 

LDAP est un service d'annuaire internet. II peut 
etre utilise dans une entreprise pour tenir a jour 
une hierarchie des employes. II fournit aussi des 
mecanismes d'identification. Nous verrons tout 
cela en detail au chapitre 10. 
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Figure 2-2 

L'aspect grassier du formulaire d'identification 


L’ecran principal 

Apres s’etre identifie, l’utilisateur arrive sur l’ecran principal. Sa struc- 
ture reprend celle de la fenetre principale d’un navigateur : dans la partie 
superieure, on retrouve les menus et les barres d’outils ; dans la partie 
centrale, le forum, avec la selection des differents messages ; sur la 
gauche, une sidebar sert a donner des informations aux membres ; en bas, 
une barre d’etat indique l’etat de l’application et l’avancement dune ope- 
ration longue (lors de connexions a des serveurs distants). 

L’ecran principal est rempli principalement grace a des sources de don- 
nees de type RDF, pour construire de maniere automatisee les princi- 
paux elements de l’interface, comme l’arbre des messages. 
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Figure 2-3 

Fenetre principale de XUL Forum 



La fenetre d’ajout/modification/lecture d’un sujet 

Pour lire, modifier ou creer un sujet, nous faisons appel a une fenetre 
pop-up, qui permet de rediger ou de lire un sujet sans perdre des yeux la 
fenetre principale du forum. 

Les champs presents sont le titre et le contenu du message. L’enregistre- 
ment ou la lecture des messages se feront par l’intermediaire d’un service 
web. 
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Figure 2-4 

L'aspect sommaire des deux 
pop-ups, Tun pour repondre, 
I'autre pour lire un message 
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Les differentes parties du XPFE mises en jeu 

XUL Forum nous permettra d’aborder differentes technologies offertes 
par l’environnement de travail que constitue le XPFE. 

Les technologies « statiques » 

Nous aborderons successivement : 

• XUL : la structure de l’application 

• CSS : mise en forme, rendu « personnalise » 

• XBL : creation de nos propres widgets 

La partie XUL permettra de nous familiariser avec ce langage : en com- 
prendre tout d’abord les fondements au travers de quelques elements 
simples, puis d’en decouvrir ensuite toute la puissante grace a des ele- 
ments en apparence plus complexes. 
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CSS sera l’occasion de (re)decouvrir les avantages et les possibilites de ce 
langage, qui est toujours present par defaut, mais que Ton peut controler 
pour definir le look and feel de l’application. 

Enfin, XBL, extensible Binding Language nous permettra de creer nos 
propres elements XUL, les widgets, et de definir leur structure mais aussi 
leur comportement, en creant ainsi un widget statico-dynamique (nous 
verrons les differents constituants d’un widget X BL dans le chapitre qui y 
est consacre). 

Les technologies « dynamiques » 

Nous etudierons plusieurs technologies connexes permettant de 
« dynamiser » notre application : 

• RDL pour alimenter le remplissage de widgets avec une source tierce 
de donnees ; 

• JavaScript, l’incontournable langage de script et son modele DOM ; 

• l’utilisation de JavaScript avec les services web (SOAP et WSDL 
notamment) ; 

• XPInstall, Cross Platform Install, pour installer et distribuer facile- 
ment notre application. 

RDL permettra de construire l’arbre des messages du forum en nous 
aidant dune source fournie par le serveur distant. JavaScript dynamisera 
l’application, a travers son Document Object Model (DOM) permet- 
tant de modifier dynamiquement l’interface XUL et commandera les 
operations concernant les services web : ce seront des operations 
« actives », comme la modification ou l’ajout d’un message. Enfm, apres 
avoir « empaquete » notre application, nous utiliserons XPInstall pour la 
distribuer (a l’aide d’un fichier .xpi) et pour commander son installation 
depuis une page web. 


Quels seront les avantages de XUL dans 
ce cas ? 

On peut se demander l’interet de choisir ce type d’application dans le 
cadre d’un ouvrage voulant presenter XUL : en effet, il existe une multi- 
tude de solutions de forum disponibles sur Internet, en HTML et ne se 
limitant pas a une certaine classe de navigateurs. 
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Des modules reutilisables 

A part le module principal qui concerne le forum, les parties de Implica- 
tion telles que l’identification, l’inscription, la liste des membres seront 
reutilisables dans le cadre d’un autre developpement. En effet, que ce soit 
dans un intranet ou dans une interface d’administration par exemple, 
l’identification est un passage oblige et lorsque vous developperez votre 
propre application, vous pourrez facilement reutiliser le code existant. De 
meme, lorsque nous serons amenes a Her XUL Forum au service 
d’annuaire LDAP (pour la liste des membres), le fichier JavaScript corres- 
pondant pourra instantanement etre reutilise pour une autre application. 

Une approche croissante des difficultes 

En separant des parties de l’application telles que l’identification de la 
fenetre principale, l’approche de XUL peut se faire de maniere progres- 
sive. Les elements qui seront utiHses dans les premieres pages seront 
familiers au developpeur web : zones de texte, boutons, cases a cocher, 
etc. Une fois le lecteur habitue a ces quelques elements XUL, il sera plus 
facile d’aborder des widgets specifiques qui auraient pu etre deroutants au 
premier abord. 

Une large utilisation des possibilites du XPFE 

Meme si dans certains cas l’utilisation de RDF ou de XBL peut sembler 
trop « entendue », l’application se veut avant tout pedagogique et son 
interaction avec differents systemes, ainsi que son utilisation des diffe- 
rentes API offertes par Mozilla, en font un projet de choix pour 
defendre la cause du navigateur libre face a des solutions proprietaires. 

Un environnement professionnel 

Enfin, en depit du fait que XUL Forum sera aussi un demonstrates 
technologique, on se retrouvera neanmoins dans une situation classique 
de developpement : traitement des donnees par un serveur distant (par 
communication RDF et services web), integration avec une application 
tierce (LDAP), prise en charge de l’internationalisation (DTD), etc., 
sont des problemes qui se posent souvent lors d’un developpement et pas 
seulement en utilisant XUL. 


Retour d'experience 

Le parti socialiste aime XUL ! 

► http://www.idealx.com/press/ 
communique. php?id=34 
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Points noirs a (’utilisation de XUL 

II ne faut neanmoins pas oublier les desavantages qu’implique le choix de 
XUL : 

• incompatibilite avec la majorite des utilisateurs ; 

• liaison (trop ?) distante avec le serveur. 

Meme si a l’heure de la redaction de cet ouvrage, le pourcentage de navi- 
gateurs Mozilla depasse les 10 % de part de marche, il reste quasiment 
neuf utilisateurs sur dix qui ne pourront pas profiter du forum. C’est 
pourquoi, si cette application etait critique pour la constitution d’un site 
ou d’un intranet, il faudrait envisager une version HTML du forum 
pour ceux qui ne pourraient profiter de la version XUL. La partie ser- 
veur de XUL Forum serait ainsi constituee par le code de base du forum 
HTML ; simplement, au lieu d’envoyer les resultats sous forme de page 
web, elle pourrait les envoyer sous forme de RDF et implementer les ser- 
vices web necessaires a la version XUL. 


Pour aller plus loin Deployment de XUL 


XUL commence a sortir du cadre 
de Mozilla et Ton peut esperer 
voir bientot des interpreters de 
XUL disponibles pour d'autres 
plates-formes que le XPFE. Le 
projet cite ci-dessous utilise du 
DHTML (Dynamic HTML), c'est a 
dire CSS, JavaScript et HTML, 
pour interpreter du XUL et le tra- 
duire en HTML. II fonctionne 
certes sur des fichiers basiques, 
mais surtout dans Internet 
Explorer, Opera et bien sur 
Mozilla. A suivre ! 

► http://wednus.com/ 
wednus0.3.4/doc/ 
samples/DXULi.htm 


DXULi 


plugin tor Wednus Window vO.3.44- 


Wednus Window DXULi Mailino List 


Add Genicap supergraphx Hyperlink Xref in formatted Real time bookmark Good Selection, Great Prices 

shapes and patterns to Adobe source JavaUoc extended, synchronization Works with all Best value, & Keal Customer 

Photoshop COBOL, more popular browsers Service 

DXULi 9 • 9 9 


[XUL source] 


(Wednus AJAX ; Debug] 


Using radiogroups 
This is foo 
<- This is bar 
c This is selected 


<?xi»l version«"1.0" encoding-"lfrF-8" standalone«“yes" 
c'xiil- stylesheet 

In ef«"clir one : //global/skin/' type-' lex 1 /lss‘ 


<vindov title«”bxa>ple for KtAK: : xml_xul” 
xnlns«”h l tp : //ww. nuzilla . or y/keynas ter /qa tekeeper /Ihet e . is . out 
<groupbox orient-"horizontal"> 

<caption tabel-"lteing radiogroups" /> 

<radiogroitp> 

«radio label»"Tliib is foo” value=”foo” /> 

<radio label-"This is bar" value-"bar" /> 

<radio label-"This is selected" selected-"true" value-"foo 
</radi ngrmip> 

<t/groupbox> 



Un autre aspect negatif est la « sur-utilisation » de methodes de commu- 
nication distantes avec le serveur. Dans le cas d’un forum HTML, la page 
est creee directement par le langage cote serveur et ne passe pas par tout 
le precede d’utilisation des services web. L’implementation cote serveur 
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est plus lourde que pour creer une simple page web. Mais peut-etre est-ce 
justement la ce qui demontre la force de XUL : agir la oil le HTML 
atteint ses limites et oil le client lourd entraine trop de complications. 
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En resume... 

Nous avons done vu au travers de ce chapitre : 

• la structure de notre application et ses differents modules : inscrip- 
tion, authentification, gestion des membres, lecture/modification/ 
creation d’un message ; 

• en quoi cette application couvre une grande partie des possibility du 
framework Mozilla ; 

• pourquoi XUL s’adapte bien a ce type de projet. 

II est grand temps maintenant de commencer a vraiment ecrire du 
XUL! 
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Rubriques 


Page d'accueil 
News 

Tutoriels Xulplanet 

Forums 

Outils 


Accueil 

Presentation XUL 

TutorielXUL 

Applis Web 

Format RDF 

Faire des Extensions 

XPCOM 

Reference 

Glossaire 

Ressources 

Contributeurs au wiki 


INTRODUCTION 


Ce site estconsacre a toutes les technologies embarquees dans le navigateur lid Mozilla , ainsi que d 
Firefox et le client mail O Thunderbird . 


Firefox 


Rediscover the web 



Au dela de son but initial, qui est de proposer un navigateur respectant les standards, performant, s 
multiples fonctionnalites, Mozilla est en fait une veritable plate-forme pour developper des applicat 
fonctionnant nativement sur la plupart des systemes d'exploitations. 

De I'interface graphique utilisateur reposant sur un format XML, XUL, auxcomposants XPCOM reutili: 
Mozilla offre toute une panoplie de technologies innovantes, pour la plupart standardises et relativ 
en oeuvre : XBL, EcmaScript (Javascript 1.5), CSS, XHTML , SVG , MATHML, RDF, DOM, SOAP, XML-RPC 

La plate-forme Mozilla a ete la premiere a permettre la realisation duplications desktop basees sur 
ou a servir de client leser riche pour des applications web performantes et sans limite. 

Apprenez a developper des extensions pour Firefox et les autres produits Mozilla.org, mais aussi des 
desktop ou web. 
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Premiers pas en XUL 


Sortez votre editeur favori... l’ecriture de XUL peut 
commencer ! 


SOMMAIRE 

► Premier fichier XUL 

► Modeles de boTte 

► Espaceurs 

MOTS-CLES 

► boTte verticale/horizontale 

► repartition de I'espace dans une 
boTte 

► attributflex 
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L’ecriture de code commence concretement avec ce chapitre : d’abord un 
premier fichier XUL, pour se familiariser ou se re-familiariser avec 
l’ecriture XML et la logique de groupement en boites ; ensuite, une 
amelioration pour vraiment « penser XXJL ». 


Outils Editeur de fichiers XML 

Comme vous aurez a manipuler differents lan- 
gages, le choix d'un editeur de texte s'impose. 
Celui-ci doit etre capable de gerer le format 
XML, d'enregistreren Unicode (quasiment indis- 
pensable), de reconnaTtre un peu de syntaxe 
JavaScript et CSS, etc. Sous Microsoft Windows, 
il existe bon nombre d'editeurs gerant ces 
langages : UltraEdit, HTMLPad, PHPEdit si vous 
aimez PHP..., mais aussi gvim ! L'editeur phare 
du monde Unix s'utilise aussi bien sous Unix 
que sous Windows et propose une version gra- 
phique pour les refractaires au mode console. II 
gere I'Unicode, il est facilement configurable et 
sur vim.org, vous pourrez trouver des exten- 
sions pour vous faciliter la tache d'edition du 
XML. Si bien sur vous preferez Emacs, il vous est 
aussi possible de I'utiliser ! Le choix entre les 
deux editeurs est une affaire de gout. 


Un premier fichier XUL 

Pour commencer, nous allons construire l’ecran d’identification. Il est 
compose d’un nombre limite d’elements et constitue le candidat ideal 
pour un premier fichier XXJL. 

L’idee est d’utiliser directement, au fur et a mesure que le besoin s’en fait 
sentir, les elements necessaires a la construction de notre interface. Ainsi, 
dans cette page en apparence simple, nous ne nous familiariserons qu’avec 
des elements faciles a apprehender. Les chapitres suivants permettront de 
nous attaquer au gros de l’interface et d’introduire des elements plus com- 
plexes. 

Le contenu du tout premier fichier XUL ! 

<?xml version="1.0" encodi ng="i so-8859-l"?> Q 

<wi ndow xml ns=" http : //www . mozi 11a . org/keymaste r/ gatekeeper/ 

** there . i s . onl y. xul "> Q 

Mon premier document XUL. Q 

<!-- mon premier commentai re XUL --> 

</window> Q 

On indique d’abord Q que le document qui va suivre est un document 
XML : c’est le prologue XML <?xml . . . qui se charge de ceci. Il precise 
egalement l’encodage iso-8859-1 pour l’alphabet des pays europeens qui 
permettra d’identifier des caracteres accentues. Si votre editeur de code 
gere les fichiers XML au format Unicode, vous pouvez vous passer de 
l’attribut encoding (les fichiers XML sont par defaut en Unicode). 

On ouvre ensuite 0 un element <window> qui sera l’element racine. On 
specifie son espace de nommage XML, en passant une URL speciale 
(qui fait reference au titre du film « SOS fantomes »), qui sera reconnue 
directement par l’analyseur comme indiquant que ce qui va suivre sera 
du XUL. On tape ensuite quelques lignes de texte 0 puis enfin on ferme 
l’element racine ©. 

Enregistrez ce fichier dans votre editeur favori, puis lancez Mozilla (ou 
Firefox, ou autre...) et pointez-le vers ce fichier au travers de 1 ’url file. 
Vous pouvez par exemple taper dans la barre d’adresses file://c:/jonathan/ 
monexemple.xul. Vous verrez alors s’afficher une splendide page blanche. 
C’est logique ! En effet l’organisation des documents XUL reflete 
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B.A.-BA Espace de nommage XML 

Dans un document XML, I'espace de nommage (attribut xml ns) permet d'eviter des con- 
flits entre differents noms d'elements. Par exemple, imaginons que dans ce document 
XML Ton veuille indure des balises HTML (il est possible de melanger HTML et XUL). 
Comme XUL et HTML ont un nom d’element en commun, par exemple i frame que Ton 
peut retrouver dans les deux langages, s'il n'y avait pas d'espace de nommage, I'analy- 
seur ne saurait pas si I'on parle d'un i frame XUL ou HTML. Comme on a applique 
I'espace de nommage XUL a I'element racine, tous les elements fils seront des elements 
XUL. 

On aurait pu aussi ajouter a I'element window I'attribut xmlns:html="http:// 
www.w3 . org/1999/xhtml " et a ce moment la, pour utiliser I'element i frame HTML, 
on aurait ecrit <html :iframe>. Nous verrons ceci plus en detail lors de I'integration 
HTML avec XBL. Pour I'instant, I'important est de comprendre que I'espace de nommage 
permet de preciser a quel langage font reference les elements (id ce sont des elements 
XUL). 


l’organisation de l’interface modelisee. II est done normal qu’un texte ne 
puisse etre place independamment de tout, dans le vide. XUL decrit 
avant tout une interface et par consequent nous aurons un element des- 
tine a afficher du texte : I’element <description>. 


Le premier fichier XUL... qui fonctionne ! 

<?xml version="1.0" encodi ng="i so-8859-l"?> 

<wi ndow xml ns="http : //www . mozi 11a. org/keymaster/gate keeper/ 

** there . i s . onl y. xul "> 

<description>Mon premier document XUL.</description> 

</wi ndow> 

Maintenant, vous devriez pouvoir afficher sans probleme cette page dans 
votre navigateur Gecko favori ! Si vous ne voyez rien s’afficher, e’est pro- 
bablement que vous avez fait une erreur en recopiant. 


Astuce XUL en dehors du navigateur 

Vous pouvez egalement lancer ce document XUL « seul », e'est-a-dire sans ce qui com- 
pose le navigateur (menus, barres d'outils), pour donner I'impression que le fichier est une 
application autonome. II faut alors passer I'option -chrome a la ligne de commande du 
navigateur. Sous *nix, on tapera : 

fi refox -chrome /home/jonathan/xul/monpremierfichier.xul 
tandis que sous Windows, on pourra executer : 

"C:\Program Files\mozilla.org\Mozilla\mozilla.exe" -chrome 
c :\jonathan\monfichier .xul 
par exemple. 
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B.A.-BA Prologue XML 

Le prologue XML est constitue par les premieres lignes du document XML : <?xml . . . 
Les documents XML sont prevus pour etre encodes en Unicode par defaut, c'est-a-dire 
avec un jeu de caracteres qui utilise deux octets par caractere et qui permet de classer des 
caracteres complexes, des caracteres accentues, des ideogrammes et des caracteres 
d’autres alphabets dans un grand catalogue global. 

Cependant, votre editeur favori peut ne pas gerer I'Unicode : si vous ne voyez pas 
d'options mentionnant ce terme, c'est probablement que vous etes en train d'editer un 
fichieren latin-1 (jeu de caracteres le plus courant pour les payseuropeens), qui n'utilisera 
qu'un seul octet par caractere. 

II faut alors preciser a Mozilla que lorsqu'il lira ce fichier, ce ne sera pas un fichier Unicode, 
mais un fichier encode en latin-1 ou iso-8859-1 , afin qu'il ne cherche pas de second octet 
par caractere la oil il n'y en a pas I Si vous vous etes trompe dans le prologue XML, vous 
aurez probablement une erreur a la lecture de votre document et Mozilla vous indiquera 
la ligne et le numero du caractere fautif. Enfin, derniere remarque, si vous utilisez le sym- 
bole Euro et que vous n'editez pas un fichier Unicode, vous devrez specifier un encodage 
iso-8859-15, une variante du iso-8859-1 comprenant notamment le symbole Euro. 

Le lien ci-dessous vous permettra de visualiser sous une forme agreable I'ensemble des 
caracteres Unicode, afin de vous rendre compte de leur etendue. 

► http://www.ianalbert.com/misc/zoom-unicode.php 


Le premier probleme concernant notre document est son aspect. Le 
fond blanc, la police semblent etre une faute de gout par rapport au reste 
du navigateur ! En effet, nous n’avons pas specific de feuille de style. 
Comment obtenir un style graphique en accord avec le reste du XUL 
present dans le navigateur ? XUL propose une solution a ce probleme 
sous la forme dune feuille de style globale que Ton inclura generalement 
a nos documents et qu’il sera par la suite possible de modifier. En atten- 
dant d’aborder le chapitre sur les CSS, nous nous contenterons 
d’aj outer : 

<?xml -styl esheet href="chrome://global/skin" type="text/css" ?> 

en debut de notre document pour qu’il prenne en compte le style general 
du navigateur. Vous pouvez si vous le desirez voir a quoi ressemble cette 
feuille de style, en pointant votre navigateur a l’adresse chrome:// 
global /ski n. Apres cette petite modification, le style d’ensemble est deja 
plus agreable a l’oeil : la couleur de fond, la police sont en accord avec le 
reste du navigateur. 
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OUTILS Interpreter de XUL 

Le choix de I'application est arbitraire ; toute application implementant Gecko est en 
theorie capable d'interpreter un document XUL : on peut utiliser Firefox, Thunderbird ou 
Mozilla pour lire ce fichier. Cependant, en pratique, il est en general beaucoup plus simple 
de tester votre XUL dans le cadre du navigateur, tant pour les « bonus » offerts au deve- 
loppeur (par exemple, le debugger JavaScript, la mise en relief des elements de bloc, etc.) 
que pour les facilites telles que le bouton recharger ou la barre d'adresse, ou encore meme 
les onglets qui permettent de jongler entre les differents documents XUL composant notre 
application et aussi surtout parce que votre application sera lancee dans le navigateur ! 
Un projet actuellement en cours de developpement est XULRunner, un environnement 
d’execution pour les applications XUL, comprenant la majeure partie du XPFE mais n'inte- 
grant pas les composants inutiles, comme un navigateur. II permettrait aux gens desireux 
d'utiliser XUL de ne pas avoir a utiliser Firefox ou Mozilla. Son utilisation est decrite en 
annexe A. 

En attendant, le plus sage est d'utiliser soit Mozilla, soit Firefox pour developper. 


Alternatives Autres interpreteurs de XUL 

Gecko n'est pas le seul moteur capable d'interpreter un fichier XML pour en tirer une interface 
graphique. II existe quelques projets paralleled en Java par exemple, permettant d'interpreter 
un document XML et de le transformer en une representation Swing/AWT (les toolkits gra- 
phiques en Java). L'idee est de reprendre le concept de XML pour decrire I'interface utilisateur 
et de I'interpreter au moment de I'execution pour construire I'interface. Mais ils ne sont pas 
compatibles pour autant ! 

http://xul.sourceforge.net vous permettra d'aller plus loin dans ces autres « XML user 
interface languages ». 

II ne faut surtout pas confondre XUL et XML-UI. XUL est la denomination reservee au langage 
utilise au sein de Mozilla et XML-UI designe les autres langages fondes sur le meme principe. 
L'utilisation du terme XUL pour designer d'autres langages XML-UI serait, selon la commu- 
naute Mozilla, abusif. Ainsi, sur le site precedemment cite, pensez bien que ce n'est pas le XUL 
de Mozilla dont il est question et que pour un developpeur de Mozilla, I'auteur devrait utiliser 
le terme XML-UI I 


A la decouverte des premiers elements... 

Le premier exemple que nous avons vu n’est pas tres interessant. En fait, 
il vous permet juste de voir que votre navigateur est capable d’afficher un 
document XUL minimaliste et capable de s’integrer dans la charte gra- 
phique du navigateur. Nous allons maintenant pouvoir nous interesser a 
quelque chose de plus complet en ecrivant l’ecran d’authentification. 
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Attention Attributs ID 

Une precaution consiste a faire debuter tous les 
attributs ID de nos elements XUL par xf 
(comme XUL Forum). Ceci permet d'eviter des 
erreurs, comme appeler une barre de statut 
« statusbar » alors qu'un element possede deja 
cet ID (c'est la barre de statut du navigateur). 

II est sage de specifier des ID sur la plupart des 
elements susceptibles d'etre manipules dynami- 
quement. Ceci permettra par la suite, lorsque 
nous programmerons la partie en JavaScript de 
XUL Forum, d'acceder a ces elements rapide- 
ment, grace a leur identifiant. 


Alternative Tag <box> 

Comme vous I'aurez devine, <vbox> repre- 
sente une boite verticale et <hbox> une boite 
horizontale. Ce sont en fait des raccourcis pour : 
<box ori ent="verti cal "> et 
<box orient="horizontal">. 

Vous pouvez utiliser I'element qui vous plait le 
plus. 
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Premiere version de l’ecran d’authentification 

<?xml version="1.0" encodi ng="i so-8859-l"?> 

<?xml -styl esheet href="chrome://global/skin" type="text/css" ?> 

<wi ndow xml ns=" http://www.mozi 1 la.org/keymaster/gatekeeper/ 

** there. is. only. xul" > 

<description value="Merci de vous identifier a XUL Forum" /> 0 
<description value="Votre nom : " /> 0 
<textbox id="xf-ident_nom" /> 0 
<description value="Votre mot de passe : " /> 0 
<textbox id="xf-ident_pass" type="password" value="xxx" /> 0 
</wi ndow> 

Ceci est la premiere version que Ton aurait tendance a ecrire pour effec- 
tuer un rendu du document. D’abord une petite ligne d’introduction Q, 
sous la forme d’une variante de I’element <description>, ensuite des 
champs texte 0 et 0 precedes par un texte 0 et 0 indiquant leur fonc- 
tion. L’attribut type permet de faire apparaitre de petites etoiles dans le 
deuxieme champ texte ©. 

Si vous essayez cet exemple dans votre navigateur, vous remarquerez 
deux problemes au niveau du placement des elements. Tout d’abord, les 
elements descri pti on et les zones de texte sont places les uns en-dessous 
des autres. D’autre part, les zones de texte prennent toute la largeur pos- 
sible, c’est-a-dire, dans le cas d’un lancement dans le navigateur, toute la 
largeur de l’ecran, ce qui est plutot disgracieux. 


Corriger les premieres erreurs : utilisation de boites 

<?xml version="1.0" encodi ng="i so-8859-l"?> 

<?xml -styl esheet href="chrome://global/skin" type="text/css" ?> 

<wi ndow xml ns=" http://www.mozi 1 la.org/keymaster/gatekeeper/ 

**■ there . i s . onl y. xul "> 

<description value="Merci de vous identifier a XUL Forum" /> 

<hbox> 0 

<description value="Votre nom : " /> 
ctextbox id="xf-ident_nom" /> 

</hbox> 

<hbox> 0 

<description value="Votre mot de passe : " /> 
ctextbox id="xf-ident_pass" type="password" /> 

</hbox> 

<hbox> 0 

cbutton label="OK" /> 

</hbox> 

</wi ndow> 
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Cet exemple est plus adapte pour obtenir un resultat satisfaisant. Pour ce 
faire, on a place tous les elements censes etre sur la meme ligne dans des 
boites horizontales o© et 0 et on a empile les boites. 



Figure 3-1 Mise en relief des boites horizontales dans notre premier exemple 

II faut en effet comprendre le modele de boite de XUL. Contrairement a 
certains environnements de developpement qui permettent de placer les 
elements au pixel pres, XUL, comme la librairie GTK d’ailleurs, place 
ses widgets dans des boites. La fenetre (lelement <wi ndow>) se comporte 
comme une boite verticale. Chaque element est place en-dessous du pre- 
cedent et prend toute la largeur possible. Ainsi, les zones de texte et les 
descriptions sont placees en etages et prennent toute la largeur qui leur 
est offerte (dans notre premier exemple). A l’inverse, dans une boite 
horizontale, les elements prennent toute la hauteur possible et s’entas- 
sent de gauche a droite. Ainsi, dans notre second exemple, ce sont les 
boites horizontales qui s’empilent les unes sur les autres et, dans chacune 
de ces boites, le texte et la zone de texte vont le plus a gauche possible. 


Astuce Orientation de I'element racine 

Vous pouvez definir I’orientation de I'element 
window en utilisant I'attribut orient, par 
exemple : 

<window ori ent="hori zontal "> 


Astuce xulfr.org et modele de boite 

► http://xulfr.org/sources/tutoriel/boite/ 
boite. xul 

permet de tester en ligne le modele de boite... 
A essayer sans tarder ! 
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On retrouve le traditionnel prologue XML. 


Ainsi que I'habituel element racine. 


Un groupbox est I'equivalent du 
<fieldset> du HTML: il entoure ses ele- 
ments fils d'une bordure, parfois arrondie sui- 
vant le theme du navigateur. 

Le caption est I’equivalent du <1 egend> du 
HTML : il definit le titre du <groupbox>. 

C'est le tableau qui est ouvert : griden anglais. 

Les colonnes du tableau : ce sont des colonnes 
structurelles, qui ne correspondent a aucun affi- 
chage reel. 

Les deux colonnes, chacune avec un attribut ID. 


Maintenant, les differentes lignes du tableau. 
Une premiere ligne. 
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OuilLS DOM Inspector 

Indispensable lorsque I'on debute, I'inspecteur DOM (Tools, DOM Inspector ou 
Outils, Inspecteur DOM) vous permettra de naviguer dans la hierarchie des differents 
fichiers, de mettre en relief tel ou tel element (cliquez sur un element XUL et ses contours 
dignoteront en rouge) et surtout, lorsque nous les aurons introduits, de voir le resultat des 
pages avec overlay. 

II s'installe avec Mozilla, en choisissant dans I'installateur les options avancees et en 
cochant la case inspecteur DOM. 


Cette solution n’est peut-etre pas tres elegante, mais elle permet d’ali- 
gner descriptions et zones de texte sans pour autant disproportionner les 
elements. 


Un element plus adapte : un tableau 

Tous ces elements vus jusqu’ici sont assez familiers au developpeur web ; 
c’est pourquoi on aurait tendance a vouloir inserer un tableau pour 
garantir l’alignement de la fenetre d’authentification. Ceci est bien sur 
possible, en utilisant lelement <grid> et ses sous-elements <rows>, 
<row>, <columns>, <column>. Cet element est plus adapte que les boites 
dans lesquelles on se perd vite et permet de garantir une structure nette 
sans « bricolage » avec les boites pour obtenir le resultat attendu. 

<?xml version="1.0" ?> 

<?xml -styl esheet href=" chrome : //global /ski n" ty pe=" text/css" ?> 

<wi ndow xml ns="http: / /www.mozi 1 1 a .org/keymaster/gate keeper/ 

** there . i s .onl y .xul "> 

<groupbox> 


<caption 1 abe1="Identi fi cati on requise" /> 


<gri d> 

<co1 umns> 


ccolumn id="textes" /> 
<cofumn id="champs" /> 
</cof umns> 

<rows> 

<row> 
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<description val ue="Votre nom : " /> 

<textbox i d="xf-i dent_nom" /> 

</ row> 

<row> 

<description value="Votre mot de passe : " /> 
ctextbox i d="xf-i dent_pass" type="password" /> 
</ row> 

</ rows> 

</gri d> 

<hbox> 

<button label="0K" /> 

</hbox> 

</groupbox> 

Notre exemple est maintenant revu et mele des boites et un tableau. Le 
tableau ne peut pas servir, comme dans du mauvais HTML, a ameliorer 
l’aspect graphique de la page, en plafant des elements au pixel pres, en 
faisant des bordures, etc. II est uniquement destine a structurer le docu- 
ment et permet d’aligner parfaitement les <textbox> et les 
<descri ption>. 


Identification 
votre nom : 

Votre mot de posse : 
OK 


Figure 3-2 Le cadre d'identification 

Finalement nous avons vu l’utilisation de quelques elements simples : 
boutons, zones de texte, descriptions. Nous avons egalement apprehende 
le modele de boite de XUL, en utilisant d’abord beaucoup de boites, puis 
nous nous sommes aperipis que ce netait pas forcement la solution la 
plus efficace et qu’une bonne utilisation d’un tableau permettait de 
structurer sans probleme l’interface. Une derniere touche reste cepen- 
dant a apporter : il faudrait pouvoir centrer ce cadre pour avoir un rendu 
plus agreable. 

La touche finale : spacers 

Nous allons finaliser ce fichier XUL en utilisant des spacers. Un spacer se 
charge d’occuper tout l’espace possible dans une boite. Ainsi, notre cadre 
<groupbox> sera place dans une boite horizontale avec a sa gauche et a sa 
droite deux <spacer>, qui se repartiront de maniere equitable l’espace 
restant et centreront le <groupbox>. 
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< Chaque ligne doit posseder deux elements car 
on a annonce deux colonnes. 


< Une autre ligne. 

< Toujours deux elements. 


< La boite permet d'eviter que le bouton ne prenne 
toute la largeur de la page. 
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<wi ndow> 

<hbox> 

<spacer flex="l" /> 

<groupbox> 

(■ ■ 0 

</groupbox> 

<spacer flex="l" /> 

</hbox> 

</wi ndow> 

Lelement spacer admet un attribut flex, comme d’ailleurs la plupart 
des elements XUL. II permet de dimensionner proportionnellement les 
elements dune meme boite. En fait, dans le calcul des dimensions dans 
la boite horizontale, on laisse d’abord le groupbox (qui n’a pas d’attribut 
flex) prendre la taille qui lui est necessaire. Ensuite, l’espace restant est 
reparti entre les elements qui, eux, possedent un attribut flex. II y a deux 
« unites » de f 1 ex au total, ce qui fait pour le premier element la moitie 
de l’espace restant et pour le second, l’autre moitie. Si les attributs f 1 ex 
avaient ete de deux et de un, on aurait eu deux tiers de l’espace pour la 
boite de gauche et un tiers pour la boite de droite. 
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Figure 3-3 Le rendu final de la page d'identification 
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Si l’element groupbox avait eu l’attribut flex="l", la repartition en lar- 
geur d’ecran aurait ete : un tiers de l’ecran pour le groupbox, un tiers de 
vide a droite et, enfm, un tiers de vide a gauche. Vous pouvez tester tous 
ces attributs sur la zone de test du site xulfr.org mentionnee plus haut, ou 
en modifiant vous-meme le fichier de l’ecran d’authentification. 

Avec cette petite modification, notre fichier est maintenant fin pret : le 
cadre regroupant les elements est centre en largeur et les textes sont par- 
faitement alignes. Le bouton OK occupe l’espace qui lui est reserve en se 
plafant a gauche du cadre. 


En resume... 

Nous avons vraiment dans ce chapitre fait connaissance avec XUL : ses 
elements, sa conception de l’interface (du texte ne se trouve jamais 
seul !), sa logique de boite, etc. 

Nous pouvons maintenant nous interesser a la place et au rangement des 
fichiers au sein du projet. Si vous avez envie de verifier vos connaissances 
sur le modele de boite, vous pouvez essayer de centrer le cadre en hau- 
teur, d’eliminer une boite en jouant sur l’attribut orient de lelement 
racine <window>, ou meme de placer le bouton OK dans la partie droite 
du cadre. 
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Line veritable extension Mozilla 


Nous sommes maintenant suffisamment aguerris aux 
techniques XUL pour integrer l’extension directement dans 
Mozilla. Bienvenue dans le navigateur ! 


SOMMAIRE 

► Creation des dossiers et 
premier fichier contents.rdf 

► Regeneration de la liste interne 
des extensions 

► Internationalisation integree 

MOTS-CLES 

► DTD 

► Fichier chrome.rdf 

► Dossiers content, locale, style 
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Attention Firefox 1.5 et Thunderbird 1.5 

Si vous utilisez I'un des deux nouveaux logiciels 
sus-cites pour developper, des modifications ont 
eu lieu, relatives au processus d'enregistrement 
des extensions (lors du developpement). II ne 
faut pas editer de fichiers contents, rdf ni 
installed-chrome.txt, mais seulement 
rajouter les fichiers .manifest decrits en 
annexe dans le dossier chrome de Firefox ou de 
Thunderbird, puis redemarrer le logiciel et c'est 
bon I (le reste du chapitre s'applique toujours) 

Si par contre vous utilisez toujours la suite 
Mozilla ou son digne successeur SeaMonkey, ce 
chapitre s'applique dans son integralite. 


Maintenant que notre premier fichier, point d’entree de notre applica- 
tion, est pret, nous pouvons organiser la repartition des fichiers dans 
l’application. Comme nous avons decide des le depart de faire de XUL 
Forum une extension Mozilla, il nous faut maintenant preparer l’inte- 
gration de ce fichier et des suivants dans Mozilla. Cette etape est un peu 
fastidieuse mais essentielle avant de pouvoir continuer a coder. Le pro- 
grammeur XUL doit etre polyvalent et jongler entre differents langages ! 


La separation generate des fichiers 

Une extension repartit typiquement ses fichiers dans trois dossiers : 
content, locale et skin. Le premier contient les fichiers XUL, 
JavaScript et XBL. Le deuxieme les elements dependants de la langue et 
enfm, le dernier, toutes les CSS. Pour l’instant, nous ne remplirons que 
le dossier content. 

Cette separation naturelle est redoutablement efficace. En effet, c’est en 
quelque sort un design pattern pret a l’emploi qui est applique : d’un cote 
se trouve l’interface, de l’autre l’apparence ; enfm, l’internationalisation 
est bien separee du reste. De plus, il sera possible d’enrichir l’extension : 
un traducteur peut preparer un dossier correspondant a sa langue, pret a 
etre integre dans la version finale de XUL Forum, sans pour autant 
empieter sur le travail du developpeur codant en parallele. Ce fichier de 
langue pourra meme etre installe separement : c’est justement le cas pour 
les fichiers de langue fra^aise pour Firefox, qui peuvent se telecharger a 
part, comme sur http://frenchmozilla.sf.net. 


Figure 4-1 

^organisation des fichiers de XUL Forum 


Les differents dossiers de XUL Forum 

— content 

— fichiers.xul 
— javascript 

fichiers.js 


— locale 

— fr-FR 

— fichiers. dtd 
— fichiers. properties 

— en-US 

— etc. 


— s^c/n 


fichiers.css 
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Contents.rdf et dossier content 

Pour continuer, creez tout d’abord un dossier sur le disque destine a 
accueillir votre application. Deux solutions s’offrent alors a vous : 

• Vous desirez placer tous vos fichiers au coeur meme de l’installation de 
Firefox ou de Mozilla : vous creerez alors un dossier xul forum dans le 
dossier chrome de l’installation de votre navigateur, par exemple /home/ 
jonathan/apps/fi refox/chrome ou C:\Program Files\mozilla.org\ 

Mozi 1 la\chrome pour une version Windows. 

• Vous pensez changer de version du navigateur, vous avez a partager la 
ressource entre deux navigateurs differents, vous avez besoin de laisser 
l’extension sur un disque commun a deux OS : vous devez alors placer 
votre application dans un dossier de votre choix, mais separe. 

La difference entre les deux methodes sera abordee plus loin dans ce 
chapitre, lorsqu’il faudra indiquer au navigateur oil sont places les 
fichiers d’extension. En fait, en plafant votre dossier xul forum dans le 
dossier chrome du navigateur, vous considerez l’application comme une 
extension qui aurait ete livree avec le navigateur. La difference est 
minime et cela n’influe en rien sur le developpement ; c’est en quelque 
sorte une habitude de travailler dans le dossier chrome. Libre a vous de 
vous y conformer ! 

Ensuite, il faut creer les trois dossiers mentionnes ci-dessus au sein du 
dossier xulforum, dossier racine de F application : content, locale et 
skin. La encore, le nom des dossiers est une sorte de convention, qu’il 
vaut mieux respecter pour des raisons de clarte. Nous allons maintenant 
creer un fichier special qui, une fois place dans le dossier content, decrira 
son contenu et la fafon dont Mozilla devra gerer les differents fichiers. 

Ce fichier s’appelle contents . rdf. Nous en creerons deux autres pour les 
dossiers skin et locale le moment venu. 


Le premier fichier RDF, contents.rdf, pour enregistrer le contenu de I 'extension 
aupres du navigateur 

<?xml version="1.0" ?> 

<RDF : RDF xml ns: RDF=" http://www.w3. org/1999/02/22-rdf-syntax-ns#" 
xml ns: chrome^" http://www.mozi lla.org/ rdf/chrome#"> 

<RDF:Seq about="urn : mozill a : package : root"> Q 

<RDF:li resource="urn:mozilla:package:xulforum" /> 0 

</RDF : Seq> 

<RDF:Description about="urn:mozilla:package:xulforum" Q 
chrome:displayName="XUL Forum" 
chrome :author="Jonathan Protzenko" 
chrome : name="xul forum"> 

</RDF : Descri pti on> 

</RDF : RDF> 
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Le format de fichier RDF, deja mentionne plus haut, fait une premiere 
apparition ici. Ce fichier contents. rdf decrit le contenu du dossier dans 
lequel il est place. La plupart des fichiers RDF suivent cette structure : 
d’abord un element RDF : Seq {Seq comme sequence) qui comprend des sous- 
elements RDF : 1 i (comme list item) et ensuite un element RDF : Desc ri pti on 
pour chaque RDF : 1 i mentionne plus haut. 

Si Ton s’interesse de plus pres au fichier, on voit qu’il y a deux espaces de 
noms utilises : un pour RDF (le format qui garantit la structure du docu- 
ment), un autre pour chrome, qui permet de renseigner des champs spe- 
cifiques au navigateur, champs comme l’auteur, le nom de l’application, 
etc., qui pourront etre affiches une fois que l’extension sera installee. En 
effet RDF, comme nous le verrons plus tard, peut etre utilise de maniere 
differente, sans l’espace de noms « chrome ». 

On a done un element RDF: Seq Q qui indique que e’est un paquet que 
Ton decrit (attribut about). II possede une entree RDF:1i 0 qui contient 
le nom du paquet contenu dans ce dossier. II est preferable d’utiliser un 
nom de paquet en minuscules et de le garder pour tous les differents 
champs : nom du dossier racine, nom chrome de l’extension, etc. II n’y a 
qu’un seul paquet, xulforum, done un seul element RDF:li. L’ attribut 
resource sert a indiquer le nom du paquet. II sera toujours sous la forme 
urn :mozi 1 1 a : package : nomdupaquet. On rencontrera plus loin des attri- 
buts sous la forme urn:mozilla:locale:nomdelalocale (pour les fichiers 
de langue) par exemple. 

Ensuite vient l’element RDF : Descri pti on 0 faisant reference a l’element 
RDF:li : l’attribut about est le meme que l’attribut resource utilise plus 
haut. II contient des attributs utilises par le navigateur pour afficher un 
resume du paquet dans le gestionnaire d’extensions (Firefox) ou dans les 
options (Mozilla) : nom, auteur, nom utilise a l’affichage, etc. 

Les autres attributs que Ton peut ajouter a l’element RDF: Descri pti on 
sont : 

• authorURL, pour indiquer l’adresse du site de l’auteur (comme son 
nom l’indique !) ; 

• descri ption, pour donner une description rapide de l’application ; 

• extension, si la valeur est true, alors ce paquet sera considere comme 
une extension et apparaitra dans le gestionnaire d’extensions. 

Nous verrons par la suite qu’il est possible d’utiliser d’autres elements 
RDF: Seq dans ce meme fichier contents . rdf, dans le cas des overlays 
notamment. 

Comme le fichier identification .xul sera le « point d’entree » de 
l’application, il faut le copier dans le dossier content, en lui attribuant un 
nom particulier qui en fera la page d’accueil de l’extension. On copiera 
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done i denti fi cati on . xul en le renommant xul forum . xul (toujours dans 
le dossier content) ; comme ce fichier porte le nom du paquet, e’est 
celui-la qui sera affiche par defaut quand nous accederons a l’extension. 


Modification du fichier chrome.rdf 

Maintenant que la structure de base de l’extension est prete, nous allons 
enregistrer cette application aupres du navigateur. Que ce soit dans le cas 
de Firefox ou de Mozilla, la structure interne reste la meme. Tous les 
composants (navigateur, fichiers de langue, inspecteur DOM, debugger 
JavaScript) sont enregistres aupres du navigateur par l’intermediaire d’un 
fichier special, appele chrome.rdf. II est situe dans le dossier chrome du 
repertoire d’installation de votre navigateur ; ce fichier est, comme son 
nom l’indique, lui aussi un fichier RDF, ce qui rend son edition manuelle 
malaisee. C’est pourquoi nous ne le modifierons pas directement. Nous 
allons editer un autre fichier, installed-chrome.txt, situe dans le meme 
dossier. Ce fichier est lu par le navigateur et sert a creer le fichier 
chrome . rdf. Sa syntaxe est extremement simple et nous rajouterons sim- 
plement une ligne a la fin : 

skin, install ,url , jar : resource :/chrome/cl assi c .jar !/ski n/ 

classic/browser/ 0 

content , i nstal 1 ,url ,file:///mnt/data/Livre/xulforum/content/ 0 

La ligne O est l’une des nombreuses lignes deja presentes dans le fichier. 
Ici, c’est une reference a l’habillage par defaut du navigateur. La ligne 0 
est la ligne que nous ajoutons. Une ligne de ce fichier se structure en 
quatre elements : le type de contenu, le mot install, le mot url et 
l’adresse du fichier. La plupart des elements mentionnes dans le fichier 
sont compresses dans des fichiers portant une extension .jar, c’est pour- 
quoi leur dernier champ differe un peu du notre. Nous indiquons 
simplement le chemin vers notre extension via une URL de type file://. 

Si vous avez choisi de placer les fichiers de votre application dans le 
dossier chrome de Mozilla, au lieu d’une url file, vous indiquerez une 
URL de type resource:/chrome/xulforum/content/ ; resource indique 
que vous etes dans le dossier chrome interne du navigateur. II est parfois 
indique de laisser une ligne blanche a la fin du fichier, mais il semblerait 
que la creation du fichier se fasse sans cela. 

Vous pouvez maintenant supprimer le fichier chrome.rdf afin qu’il soit 
recree a la prochaine ouverture du navigateur. Si vous utilisez Windows 
et Mozilla, pensez a desactiver la fonction qui ckl aunch qui vous reduit le 
navigateur dans la barre des taches, sinon le fichier ne sera pas recree. 


i 

•vj- 


Attention Versions Microsoft Windows 

Pour les versions Microsoft Windows, il est 
recommande d'utiliser la syntaxe suivante : 
content, install ,url , f ile:///d|/l ivre/ 
xulforum/content/ 

N’oubliez pas le slash final ! Son absence 
entrainerait irremediablement une erreur. [.’utili- 
sation d’une barre verticale a la place des deux 
points est cependant facultative. 
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Astuce Regarder comment font les « vraies extensions » 

Si vous voulez etudier d'un peu plus pres une extension livree avec votre navigateur, il 
vous suffit de copier le fichier .jar dans un dossier de votre choix et de le decompresser. 
Sous Unix, ceci se fait avec la commande unzf p. Sous Windows, des utilitaires tels que 
WinZip ou WinRAR marcheront egalement. La structure de ces fichiers est, a peu de 
choses pres, la meme que la notre : dossiers content, locale et style. Simplement, leurs 
dossiers content sont separes en plusieurs sous-dossiers, car ce sont de gros paquets qui 
necessitent une organisation plus structure que la notre. Les fichiers contents, rdf 
sont eux aussi tres similaires au notre. 


Void le recapitulatif des etapes : 

• creation de la structure de l’extension en trois dossiers ; 

• ajout d’un fichier contents . rdf destine au navigateur ; 

• placement du fichier par defaut xul forum .xul ; 

• enregistrement aupres du navigateur via installed-chrome.txt ; 

• regeneration du fichier chrome, rdf apres sa suppression et redemar- 
rage du navigateur. 

Si vous n’avez oublie aucune etape, vous pouvez relancer votre navigateur 
et le pointer a l’adresse chrome ://xul forum/content/. Vous devriez 
maintenant voir apparaitre l’ecran d’authentification. 


Attention Mise a jour des extensions 

Lorsque vous developpez une extension, si celle-ci est integree au navigateur, I'interface 
XUL ne sera pas modifiee apres chaque edition du fichier. Elle le sera apres chaque rede- 
marrage du navigateur. De meme, les entites XML que nous verrons un peu plus loin ne 
se mettent a jour qu'apres une modification du fichier les contenant et un redemarrage 
du navigateur. Dans tous les cas, si vous ne voyez pas de modification immediate, pensez 
a verifier que vous avez bien redemarre Firefox ou Mozilla ! 

Vous pourriez vous demander pourquoi I'on ne continue pas a visualiser les fichiers via 
I'URL file://. En fait, des que nous aurons integre I'internationalisation, nous ne ferons 
plus reference aux fichiers de XUL Forum que via I'URL interne chrome://, qui implique 
d'etre dans le cadre du navigateur et non pas dans une URL file://. 

Si vous voulez gagner du temps, ajouter un favori dans la barre d'outils est une solution. 
Vous n'aurez plus qu'a le faire pointer vers I'URL de I'extension et vous y accederez en un 
clic ! 


Si vous ne voyez rien apparaitre, essayez de verifier les points suivants : 

• tout d’abord, votre fichier contents. rdf est peut-etre mal forme. 
Essayez de l’afficher dans le navigateur via FURL chrome ; celui-ci 
vous signalera une erreur eventuelle (message Parsing error at 
line X) ; 
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• essayez ensuite de rechercher « xulforum » dans le fichier 
chrome . rdf ; si vous ne trouvez rien, la creation du fichier a echoue et 
il faut trouver la source de cette erreur : faute de frappe dans le fichier 
installed-chrome.txt? erreur dans le chemin vers l’extension ? 
caractere slash (/) final manquant ? 

• avez vous bien note le nom du fichier par defaut (xulforum.xul) dans 
le dossier content ? 

• votre systeme d’exploitation ne cache-t-il pas un processus qui n’aurait 
pas ete ferme ? Pour vous en assurer, tapez ps aux Igrep fi refox-bin 
ou mozilla dans une console Unix, sous Windows, la sequence 
control -alt-suppr fait apparaitre une console qui liste les processus 
actifs. 

Si vous n’arrivez toujours pas a faire marcher l’extension, reprenez les 
etapes une par une... il est souvent plus simple de tout reprendre a zero ! 

Si tout marche, vous pouvez passer a l’etape suivante, qui est la prepara- 
tion de l'internationalisation, aussi appelee H8n. 


B.A.-BA URL chrome://, file://... 

Mozilla utilise plusieurs protocoles pour acceder aux fichiers. Tandis que certains sont 
generalistes et se retrouvent dans les autres navigateurs (file:// pour les fichiers locaux, 
http://, ftp://... pour ne citer que les plus connus), il en existe des particuliers, notamment 
I'URL chrome://. Elle sert a acceder aux extensions enregistrees dans le fichier 
ch rome . rdf et a tous leurs fichiers. 

Globalement, vous utiliserez chrome : //nomdupaquet/content ou locale ou 
ski n/fi chi er . xul . Ainsi, une fois que vous distribuerez ('application, vous saurez 
que tous les fichiers seront mis dans le dossier chrome du navigateur et vous n'aurez pas 
a vous preoccuper de I'endroit ou est installe le navigateur. De plus, les URL chrome ne 
dependent pas de la langue, comme nous allons le voir au paragraphe suivant. 


Pour aller plus loin Vos propres protocoles 

Si c'est une relecture du iivre que vous faites (et 
seulement dans ce cas, car le lien propose est tres 
technique), vous pouvez essayer de creer vos pro- 
pres protocoles ! En modifiant un peu I'exemple, il 
serait possible d'utiliser une URL de type : 
xchrome : //xul forum/ content/ 
pour acceder a I'extension. 

► http://kb.mozillazine.org/ 
Dev_:_Extending_the_Chrome_Protocol 


Integration d’une DTD et debut de 
l’internationalisation 

On pourrait se demander l’utilite d’aborder si tot l’internationalisation, 
alors que les traductions viennent en general apres la programmation. 
En fait, si Ton ne prend pas en compte l’internationalisation des le 
depart, il faut un travail enorme de modifications et de retouches sur les 
fichiers XUL pour l’integrer. L’internationalisation n’est pas le fait de 
traduire notre application : c’est le fait de rendre les traductions futures 
possibles et aisees. 
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Culture Une DTD, concretement, qu'est-ce ? 

Nous n'utilisons en fait ici qu'une seule fonctionnalite 
des DTD : les entites. II y en a bien plus. Bien que le 
systeme des DTD soit controversy car trop imprecis 
quant a sa definition d'un document XML, nous pour- 
rons neanmoins voir un exemple de DTD, pour le 
petit fichier XML illustre par la copie d'ecran donnee 
en bas de page : 

clELEMENT "livres (lfvre)> © 

<! ELEMENT livre (#PCDATA)> Q 
<!ATTLIST livre titre CDATA #REQUIRED> © 

< ! ATTLIST livre auteur CDATA #IMPLIED> © 

Des explications s'imposent. 

Pour le premiere balise, <livres>, © on precise que 
ses enfants doivent etre des balises livre. On aurait 
pu ecrire (livre+) pour preciser qu'il doit y en avoir 
au moins un. Les autres modifieurs ? (0 ou 1 occur- 
rence), * (0 ou plus) sont aussi possibles. 

Pour la balise <livre> ©, on precise qu'elle contient 
du texte ( parsed character data) qui doit etre analyse (il 
pourrait y avoir d'autres balises dedans). On aurait 
aussi pu mettre comme contenu ANY (pour tout type 
de contenu) ou EMPTY pour une balise vide (comme 
<br />). 

La troisieme ligne © precise qu'un attribut titre est 
requis sur I'element <livre> et que cet attribut con- 
tient du texte non analyse. La derniere ligne © est 


similaire a la precedente, a ceci pres toutefois que 
I'attribut auteur n'est pas indispensable. 

Une fois prete, une DTD s'insere dans un document 
XML selon la syntaxe suivante : 

<!D0CTYPE nomdutagpri nci pal SYSTEM 
"http://www.example.com/ma.dtd"> 

Ceci est dans le cas d'une DTD systeme. Pour une DTD 
publique, on ecrira (dans le cas XHTML 1 .0 strict) : 

< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Stri ct//EN" "http://www.w3 . org/TR/xhtml 1/ 
DTD/xhtml 1-stri ct .dtd"> 

Cette fois-ci, la DTD est publique, done son adresse 
est precedee d'un identifiant, public lui aussi, per- 
mettant au navigateur de comprendre directement 
de quel type de document il s'agit. Au cas oil ce der- 
nier ne « comprendrait pas », il aurait toujours 
comme solution de secours d'aller chercher la bonne 
DTD a I'adresse indiquee en suivant I'URL. 

Nous utiliserons surtout la premiere forme pour les 
documents XUL. II y a un tutoriel assez succinct dispo- 
nible sur le site w3schools qui vous permettra nean- 
moins d'assimiler les concepts de base de DTD, trop 
rapidement evoques ici. 
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<?xml version*" 1 . 0" ?> 

|<livres> 

| <livre titre="Les earners ttu programneur XUL“ auteur="]onatnan" > 
There is no data. There is only XUL. 

</livre> 

H <livre titre="Les cahiers du programneur PMP5" auteur=" stephane* > 
PHP5 esl mieux que PHP4 mars mu ins bien que PHP6 . 

</livre> 

</livres> 
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L’internationalisation se fait au travers d’entites XML definies dans une 
DTD externe, comme les entites HTML &eacute; pour le caractere 
« e », &nbsp ; pour une espace insecable (nbsp evoquant les termes anglais 
non-breaking space), etc. Dans notre cas, au lieu d’ecrire 
« Identification », nous ecrirons &ident.titre; et nous definirons pour 
chaque langue l’entite ident.titre. Le navigateur se chargera ensuite de 
retrouver la bonne langue, de localiser le fichier contenant les entites et 
d’associer la bonne valeur a chaque entite. 


Dossier locale 

Comme nous avons cree un dossier content, nous allons creer un dossier 
locale. Ensuite, pour chaque langue, nous allons creer un sous-dossier 
portant le nom de la langue. Ainsi, depuis la racine de l’extension, on 
trouvera les dossiers locale/fr-FR, locale/en-US par exemple. Dans 
chaque sous-dossier devra se trouver un fichier contents, rdf. Ce fichier, 
que nous allons placer dans le dossier fr-FR, sera, a peu de choses pres le 
meme que celui cree precedemment. 

<?xml versi on="l . 0" ?> 

<RDF : RDF xml ns : RDF="http ://www.w3 . org/1999/02/22-rdf-syntax-ns#" 

xml ns :chrome=" http://www.m 0 zilla. 0 rg/rdf/chr 0 me#"> 

<RDF:Seq about="urn:mozilla:locale: root"> 

<RDF:li resource="urn:mozilla:locale:fr-FR" /> 

</RDF : Seq> 

<RDF : Descri pti on about="urn : mozil 1 a : local e : fr-FR" 

chrome :di splayName="Pack frangais pour XUL Forum" 
chrome :author="Jonathan Protzenko" 
chrome : name="f r-FR"> 

<chrome : packages> 

<RDF : Seq about="urn : mozi 11 a : 1 ocal e : fr-FR : packages "> 

<RDF:li resource="urn:mozilla:locale: fr-FR:xul forum" /> 

</RDF : Seq> 

</chrome : packages> 

</RDF : Descri ption> 

</RDF : RDF> 

Outils Edition de locales 

Pour un maximum d’efficacite, pensez a prevoir 
deux fenetres lorsque vous editez votre fichier 
XUL. Une pour la DTD et I'autre pour le fichier XUL. 
Ainsi, vous pourrez gerer I'internationalisation au 
fur et a mesure, ce qui vous evitera de devoir 
revenir peniblement sur votre code apres. I\le com- 
mettez par I'erreur de vous dire que vous y revien- 
drez plus tard... c'est encore plus penible I 


On remarque d’abord quelques differences minimes : utilisation de 
urn: mozi 11a: locale dans les attributs et de fr-FR comme nom de locale. 
Une precaution sera de prevoir deux locales : une en-US qui sera presente 
par defaut dans tous les navigateurs et une autre fr-FR pour les utilisa- 
teurs francophones. 

La locale choisie sera celle qui aura ete placee le plus haut dans la liste de 
preferences de l’utilisateur. 
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B.A.-BA Locale 

Une locale est un attribut qui permet de definir la langue utilisee. Elle se compose gene- 
ralement de deux parties : la premiere est la langue, la deuxieme concerne la localisation. 
Une premiere partie sera par exemple en (anglais), fr (frangais) ou zh (chinois) ; une 
deuxieme partie sera FR (France), CA (Canada) ou GB (Grande-Bretagne), US (Etats-Unis), 
ou encore CN (Republique populaire de Chine), TW (Taiwan). La ou pour le frangais ou 
I'anglais les differences sont minimes (en en-US on ecrit « save to disk » et en-GB « save 
to disc »), pour du chinois par exemple, la signification est totalement differente : les 
encodages et les ideogrammes ne sont pas les memes selon que I'on se trouve en 
Republique Populaire de Chine ou a Taiwan ! Les locales sont utilisees par exemple dans 
un environnement Linux pour definir la langue a choisir dans les applications. 


Figure 4-2 

Choix des locales 
preferees dans Fi refox 


Languages 

Web pages are sometimes offered in more than one language. Choose 
languages for displaying these web pages, in order of preference. 
Languages in order of preference: 

French/France [fr-fr] 

English/United States [en-us] 

English [en] 


Character Encoding 

Default Character Encoding: Western (ISO-8859-1) ▼ 


Cancel OK 


Ensuite, la section <chrome:packages> indique, via le classique 
<RDF:Seq. . .> <RDF:li>, quel paquet est concerne par ces fichiers de 
langue. Ici on precise que c’est notre paquet XUL Forum, deja present 
dans le navigateur. 

Ces fichiers contents . rdf sont tres figes et ne varient generalement que 
tres peu dune extension a l’autre. Le plus dur est de les recopier sans se 
tromper ! 

Modification du fichier XUL et ajout d’une DTD 

II nous faut maintenant editer simultanement les fichiers local e/fr-FR/ 
xul forum. dtd et content/xul forum . xul . Nous garderons une seule 
DTD, soit un seul fichier pour toutes les pages de XUL Forum. Ceci 
evitera bon nombre de problemes par la suite, lorsque nous aurons a jon- 
gler entre differents fichiers. 
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<! ENTITY ident.titre "Identi fi cati on"> 

<! ENTITY ident.xf-ident_nom "Votre nom"> 

<! ENTITY ident.xf-ident_pass "Votre mot de passe"> 
clENTITY fenetre . ti tre "XUL Forum ! "> 


Pour ceux qui ont deja travaille sur des DTD, la structure est familiere. 
Pour ceux qui en sont moins coutumiers, on definit les entites en utilisant 
la structure <! ENTITY nomdel 'entite "Valeur de 1 'entite">. Le format 
nomglobal . nomparti cul i er est entierement facultatif, mais il permet de 
mieux s’y retrouver et d’eviter des confusions. Ici, le cadre est le cadre 
d’identification. II a un titre et les deux champs ont leurs attributs label 
specifies. 

Nous allons maintenant apporter deux types de modifications au fichier 
XUL : d’abord ajouter un lien vers la DTD, puis remplacer les textes par 
les entites qui leur correspondent. 

Void le fichier XUL modifie : 


xulforum.xul, avec prise en charge de I 'internationalisation 

<?xml version="1.0" ?> 

<?xml-stylesheet href="chrome://global/skin" type="text/css" ?> 


<!DOCTYPE window SYSTEM "chrome: //xul forum/locale/xul forum . dtd"> CULTURE Attributs du tag <window> 


<wi ndow xml ns="http : //www . mozi 11a. org/keymaster/gate keeper/ 

** there . i s .only .xul " title="&fenetre.titre;"> 

<groupbox> 

<caption label ="&ident. titre; " /> 

<description value="&ident.xf-ident_nom; : " /> 

<textbox i d="xf-i dent_nom" /> 

<descri pti on value="&ident.xf-ident_pass; : " /> 

<textbox i d="xf-i dent_pass" type="password" /> 

</wi ndow> 

Une nouvelle ligne a tout d’abord fait son apparition apres le prologue 
XML. Elle sert a referencer la DTD, permettant de valider ce document. 
Ici, utiHser une DTD pour decrire la structure du document n’aurait pas 
de sens, puisque XUL est deja defini. Ce n’est pas comme si nous definis- 
sions notre propre format XML. La DTD sert juste a definir nos propres 
entites. Si vous avez l’habitude de vabder vos documents HTML, cette 
ligne vous sera familiere. Le <!D0CTYPE HTML est devenu dDOCTYPE 
wi ndow : la DTD s’applique au tag wi ndow car elle est declaree comme 
<!D0CTYPE nomdutagpri nci pal . 


Nous avons ajoute un attribut ti tl e, qui signifie 
« titre », a notre fenetre. II en existe d’autres, tout 
aussi utiles, comme persist. II prend une liste 
de valeurs, separees par des espaces et permet 
d'indiquer les attributs de la fenetre dont il faudra 
se souvenir pour la prochaine ouverture : 
screenX (coordonnees X de la position de la 
fenetre), screenY, width (largeur), height 
(hauteur)... 

Ces attributs peuvent aussi etre utilises directement 
sur le tag wi ndow. Void un exemple qui melange 
les deux utilisations : 

<window width="800" height="600" 
persist="screenX screenY" . . .> 

L'attribut persist peut etre utilise sur n'importe 
quel element XUL. 
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Ce qui est remarquable ici, c’est que Ton n’a pas besoin de determiner le 
langage choisi par l’utilisateur. Mozilla se charge de completer le chemin 
vers la DTD avec le bon dossier et transforme chrome://xulforum/ 
1 ocal e/madtd . dtd en chrome://xulforum/locale/fr-FR ou en-US ou 
autre_chose/madtd . dtd. Enfin, on remplace tous les textes par leurs 
entites correspondantes. Attention aux fautes de frappe ! 


Attention DTD sur des fichiers separes 

Une idee interessante serait de separer les entites sur differents fichiers : un fichier 
xul forum. dtd pour les entites correspondant a xul forum. xul, un autre pour une 
autre page, etc. 

Un probleme se pose alors lorsqu'on utilise des elements globaux dans differentes pages. 
Ainsi, les entites du menu devront etre utilisees dans le premier ecran d'identification, puis 
dans la fenetre principale du forum, eventuellement dans des boites de dialogue... 

II vaut done mieux garder toutes les entites dans un fichier unique et les separer en blocs 
dans le fichier DTD, pour en ameliorer la lisibilite. 


Chrome.rdf 

Maintenant, de meme que nous avons enregistre l’extension aupres du 
navigateur, nous allons ajouter une nouvelle ligne au fichier install ed- 
chrome .txt. 

locale, 1 nstall , url ,fi le:///mnt/data/Li vre/xul forum/1 ocal e/fr-FR/ 

La encore, vous pouvez modifier cette ligne si vous developpez votre 
extension dans le dossier chrome du navigateur. Supprimez le fichier 
chrome . rdf et redemarrez Firefox. 

II est rare que tout fonctionne du premier coup ! Souvent, une faute de 
frappe, une erreur de reglage font que l’extension ne gere pas la DTD 
demandee. Tout d’abord, verifiez que vous avez bien la locale fr-FR en 
tete de liste dans vos preferences de langue. Si ce n’est pas le cas, le navi- 
gateur peut chercher une locale en-US et ne pas la trouver. Ensuite, veri- 
fiez l’encodage de la DTD. Un accent qui ne correspond pas au bon 
encodage peut etre fatal et provoquer une erreur. Enfin, verifiez le 
chemin de la DTD dans votre fichier xul forum, xul. 

Si tout fonctionne, vous pouvez respirer : le plus gros est fait ! La struc- 
ture de base de l’application est posee et, dans le prochain chapitre, nous 
ne parlerons que de XUL. 
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Pour aller plus loin Accessibility 

En toute rigueur, il faut egalement definir les touches de raccourci pour les elements XUL, 
en fonction de la langue. Pour un eventuel bouton Valider, on ecrira ainsi dans la DTD : 

clENTITY bouton. valider "Valider"> 

<! ENTITY bouton .val ider. accesskey "V"> 

Puis dans le fichierXUL : 

<button accesskey="&bouton .val ider .accesskey ; " 
label="&bouton. valider;" /> 

Dans la majeure partie des cas, la lettre V sera soulignee et une pression sur cette meme 
touche amenera le focus sur ce bouton. 


En resume... 

Nous avons, dans ce long chapitre, bien avance la mise en place de 
l’application : 

• les differents fichiers ont ete integres au coeur meme de Mozilla pour 
en faire une extension interne accessible via FURL chrome : // ; 

• un systeme d’internationalisation a ete mise en place des le depart, 
avec la encore une integration au sein meme du navigateur. 

Le seul regret que nous pouvons avoir est de ne pas encore assez parler 
de XUL ! Dans ce chapitre, ce sont surtout les technologies connexes qui 
se sont imposees. Dans le chapitre qui va venir, nous allons construire la 
fenetre principale de XUL Forum et un peu mettre de cote les elements 
qui concernent Fintegration dans Mozilla. 
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XUL avarice : 
la fenetre principale 


L’ecran d’authentification n’etait qu’une introduction. Des 
maintenant, le gros du travail peut commencer ! 


SOMMAIRE 

► Structure globale : separation 
des grandes parties de I'inter- 
face 

► Plus de clarte : repartition du 
code sur plusieurs fichiers 

► Creation de I'interface en detail 
avec les differents elements 

MOTS-CLES 

► Overlays 

► Splitters 

► Arbre hierarchique 
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Maintenant que la syntaxe de XUL vous est plus familiere, nous pou- 
vons attaquer le codage de l’ecran principal. Deja introduit dans le cha- 
pitre 2, il peut se decouper en grands ensembles. Nous allons partir du 
plus generaliste pour nous orienter vers le plus detaille : d’abord un 
decoupage de l’interface, puis un travail de precision pour bien placer les 
differents elements. 


La structure globale 


Culture lxr? 

LXR signifie « Linux Cross Reference ». C'est un 
outil developpe initialement pour consulter les 
sources du noyau Linux via une interface web. II 
permet de mettre en relation les differentes pages 
contenant du code source C, en permettant par 
exemple d'aller a la definition d'une fonction, 
d'aller directement a I'endroit oil est dedaree une 
structure, etc. 

LXR est utilise par le projet Mozilla pour naviguer 
entre les differentes branches (branche de deve- 
loppement, branche stable via une interface web) 
et pour consulter facilement du code edate sur 
plusieurs parties de I'ensemble Mozilla. 

► http://lxr.mozilla.org 


Decoupage avec les principales bottes 

Sur le schema ci-contre, les grands elements de l’ecran principal de XUL 
Forum sont mis en relief. En fait, l’ecran principal ressemble fortement a 
la fenetre principale de Mozilla. La structure est eprouvee et permet un 
maximum d’efficacite : d’abord, en haut, les menus ; ensuite, la barre 
d’outils, contenant les differents boutons, pour la plupart des raccourcis 
vers des elements de menu ; au milieu, les deux grandes parties, separees 
par une poignee de redimensionnement ; enfin, en bas, la barre de statut. 

Dans l’absolu, l’empilement des differents elements implique l’utilisa- 
tion d’une boite verticale. Dans la pratique, c’est la fenetre principale, 
orientee verticalement, qui jouera ce role : il est inutile de rajouter une 
boite supplementaire. Les deux boites verticales « membres » et 
« forum » seront separees par une poignee pour permettre a l’utilisateur 
de redimensionner l’espace ; ces deux boites verticales seront elles- 
memes placees dans une boite horizontale. 


Astuce Fichier XUL principal de Mozilla, sur LXR 

Si vous voulez regarder comment se structure I'interface principale du navigateur, vous 
pouvez aller consulter le fichier designe a I'URL suivante : 

► http://lxr.mozilla.org/mozilla/source/browser/base/content/browser.xul 

Bien qu'il soit destine a etre traite par le preprocesseur C, avec notamment I'utilisation de 
#i ncl ude en fonction des differentes plates-formes, il reste neanmoins lisible. Son con- 
tenu s'edaircira au fur et a mesure du livre. Pour I'instant, la structure d'ensemble devrait 
etre comprehensible, ainsi que les attributs des elements que nous allons voir. 

En fait, il faut comprendre que la fenetre principale du navigateur est un fichier XUL tout 
a fait standard, certes un peu complexe, mais accessible comme tout document XUL via 
une URL chrome. Lancer Firefox revient a le faire pointer vers I'URL chrome:// 
browser/content. Si vous I'avez deja lance, vous pouvez aller a cette adresse via la 
barre d'adresses et vous verrez le navigateur dans le navigateur. Pour la suite Mozilla, le 
fichier XUL du navigateur est chrome : //navi gator/content. 
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Figure 5-1 

Les ensembles de I'ecran 
principal mis en relief 


i 

Lf) 


Void done un aperi^u global du document : 

<?xml versi on="l . 0" ?> 

<?xml-stylesheet href="chrome://global/skin" type="text/css" ?> 

< ! DOCTYPE window SYSTEM 

"chrome : //xul forum/local e/xul forum .dtd"> 

<wi ndow xml ns="http : //www . mozi 11a. org/keymas ter/gate keeper/ 

** there . i s . onl y. xul " 

ti tl e="&i ndex . fenetre_ti tre ; "> 

<!-- ici la barre de menu — > 

<!-- ici la barre d'outils --> 

<hbox> 

<!-- ici la partie de gauche pour la liste des membres --> 
<!-- element separateur --> 

<!-- ici la partie de droite pour l'arbre des messages --> 
</hbox> 

<!-- espaceur --> 

<!-- ici la barre d'etat --> 

</wi ndow> 
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La structure n’a finalement que peu change par rapport au fichier precedent. 
Celui-ci s’appelle maintenant i ndex. xul et integre toujours la DTD globale 
de l’application. II est toujours place dans le dossier content de l’extension et 
necessitera un redemarrage de votre navigateur pour etre disponible. 


Rappel Commentaires en XUL 

Comme en XHTML, les commentaires en XUL sont encadres par des balises < ! -- et — >. 
N'hesitez pas a abuser des commentaires, surtout lorsque le niveau d'imbrication des 
balises commence a etre important. Vous serez alors heureux, lorsque vous reviendrez sur 
votre code, de pouvoir en comprendre rapidement la structure, la raison pour laquelle 
vous aviez place tel ou tel element, ou encore les differentes proprietes d'un attribut 
bizarre. Pensez aussi a la personne qui vous lira, le futur mainteneur de votre code, pour 
qui il est toujours heureux de laisser quelques commentaires ! 


Separation en overlays 

La fenetre principale se compose d’un nombre assez important d’ele- 
ments. II serait bien sur possible d’imbriquer tous les elements dans le 
meme fichier, mais le niveau de profondeur deviendrait vite effrayant et 
un fichier de cette taille serait difficile a gerer. Une technique plus ele- 
gante serait d’eclater le contenu de la fenetre principale sur plusieurs 
fichiers : l’un contiendrait tous les menus, la barre d’outils et la barre 
d’etat, un autre l’affichage des elements du forum et un dernier ce qui 
concerne les membres. 

Comment repondre simplement a ce probleme ? En utilisant la solution 
XUL des overlays. Ces derniers s’integrent de maniere transparente dans 
le document XUL, en effectuant une sorte « d’ajout » au document ori- 
ginal. 

Dans le document principal 

Void le document reduit au minimum que nous allons garder pour 
i ndex . xul . 


On inclut chaque over lay grace a une directive 
XML. 


index.xul n'est plus qu'un squelette, amene a etre rempli par les overlays 

<?xml version="1.0" ?> 

<?xml -styl esheet href=" chrome : //global /ski n" ty pe=" text/css" ?> 

<?xul -overlay href="chrome: //xul forum/content/ 

** index-barres-overlay.xul "?> 

<?xul -overlay href="chrome: //xul forum/content/ 

**■ index-membres-overlay.xul"?> 

<?xul -overlay href="chrome: //xul forum/content/ 

** index-forum-overlay. xul"?> 


56 


www.frenchpdf.com 


<!DOCTYPE window SYSTEM "chrome://xu1forum/1oca1e/index.dtd"> 

<wi ndow xml ns="http ://www. mozi 11a. org/keymaster/gatekeeper/ 

** there . i s .onl y .xul " 

ti tl e="&i ndex . f enetre_ti t re ; "> 
ctoolbox id="xf-index-too1 box" /> 

<hbox> 

<vbox id="xf-index-vbox-membres" /> 


<splitter col 1 apse="before" xgrippy /></spl itter> 
<vbox id="xf-index-vbox-forum" /> 

</hbox> 

<statusbar id="xf-index-statusbar" /> 

</wi ndow> 


< La barre d’outils devra contenir les menus et les 
boutons. Son ID est indispensable au bon fonc- 
tionnementde 1 'overlay. 

< Les elements doivent etre places dans une boTte 
horizontale. 

< Cette boite verticale contiendra les deux onglets, 
un pour la liste des membres, I'autre pour les 
informations relatives au membre courant. Elle 
sera dans la partie gauche de I'ecran. 

< On ajoute le separateur avec, au milieu, la poi- 
gnee (affichee sous Mozilla uniquement). 

< Cette boite contiendra I'arbre avec les messages 
du forum, dans la partie droite de I'ecran. 


< Une barre de statut, indispensable a toute appli- 
cation professionnelle, contiendra les messages 
d'information et la barre de progression, qui 
seront ses elements fils. 


Astuce Tags complets et forme abregee 

En XML, la fagon de presenter vos tags depend de ce qu'ils contiennent. De maniere gene- 
rale, si ctagl attri butl="xxx"x/tagl> ne contient aucun element fils, il peut 
s'abreger en <tagl attri butl="xxx" />. Une fois le document XML analyse, la 
signification en est la meme pour I'analyseur (le parser). Ainsi, dans I'exemple, des ele- 
ments qui ne se retrouvent generalement qu'accompagnes d'elements fils sont abreges, 
puisque leur contenu sera defini dans les overlays. 


Attention Nommage des fichiers, ID 

Pour les attributs des elements, nous avons choisi de les faire commencer par xf (comme 
XUL Forum), puis de les faire suivre du nom de la fenetre et, enfin, de leur attribuer un 
nom parlant. Pour les fichiers, le probleme est le meme : il faut trouver des noms qui evi 
tent la confusion tout en restant facilement identifiables. Ici, nous utiliserons : 
nomdufichier.xul, puis nomdufichier-overlay-titreoverlay .xul pour 
les overlays. Libre a vous de choisir une autre convention de nommage ; vous devrez sim- 
plement penser a modifier les references aux fichiers dans les exemples de code. 
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Culture Les attributs du tag splitter 

L'element splitter est rendu differemment 
selon que Ton utilise Mozilla ou Firefox. Sous 
Firefox, il est generalement constitue de deux 
barres continues ; sous Mozilla, on retrouve au 
centre la poignee (le grippy). Si I'on clique sur 
cette poignee ou que I'on double clique sur le 
separateur avec Firefox, il se rabat et c'est la partie 
droite qui prend tout I’espace... ou la partie 
gauche ! 

L'attribut collapse (indispensable) indique jus- 
tement quel comportement adopter : soit les ele- 
ments avant doivent etre caches (c'est notre cas), 
soit ce sont les elements apres (valeur after) qui 
doivent I'etre. 


Attention Firefox/Mozilla 

II existe des differences notables entre Firefox et Mozilla quant a I'utilisation de XUL. 
L'une des principales differences se situe dans la gestion des barres d'outils : Firefox utilise 
l'element <tool barpal ette> pour rendre les barres d'outils personnalisables, tandis 
que Mozilla n'utilise que <toolbar>. Firefox n'a pas non plus la possibilite de reduire 
les barres d'outils avec les poignees situees a gauche. De meme, les separateurs 
<gri ppy> ne sont pas « rendus » avec Firefox. Lorsque la difference sera trap impor- 
tante pour ne pas etre prise en compte, elle sera signalee sous forme de remarque. Pour 
I'instant, les problemes de compatibilite se detectent facilement en testant le fichier dans 
la suite Mozilla et le navigateur Firefox. 


Dans les fichiers overlay 

Aucun de ces elements n’est rempli. Nous les avons simplement mis 
pour indiquer leur emplacement dans le document racine, mais leur con- 
tenu sera defini dans les fichiers overlays. 

Les trois lignes <?xml -overlay placees en debut du fichier index. xul 
indiquent a l’interpreteur qu’il doit integrer le contenu des overlays spe- 
cifies dans le document principal. Ainsi, les elements portant les memes 
attributs ID dans l’overlay et dans le fichier index. xul seront fusionnes 
pour donner l’index de XUL Forum. Nous retrouverons done dans le 
fichier i ndex-barres-overl ay . xul quelque chose ressemblant a : 

<?xml version="1.0" ?> 

coverl ay xml ns="http : //www.mozi 1 la.org/keymaster/gatekeeper/ 

** there . i s . onl y. xul "> 
ctoolbox id="index-toolbox"> 

<!-- les elements pour le menu, etc. — > 

</tool box> 

<statusbar i d="index-statusbar"> 

<!-- ici quelque chose comme du texte, une barre de 
progression, etc. --> 

</statusbar> 

</overlay> 


Un overlay se presente comme un fichier classique. Seule la balise racine 
<window> devient <overlay>. Lorsque le navigateur « inclut » les overlays 
au document principal, il analyse les attributs i d des elements apparte- 
nant a l’<overlay> principal. Le moteur fusionne ensuite les deux 
fichiers : l’overlay et le fichier appelant l’overlay. Il applique pour ce faire 
deux regies a ne pas oublier : 

• si un element de l’overlay possede le meme id qu’un element du 
fichier principal, les sous-elements du premier viennent s’aj outer aux 
sous-elements du second ; 

• les sous-elements du premier seront places a la suite des sous- 
elements du second. 
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La regie s’ applique sur tous les elements de l’overlay dont l’attribut i d est 
le meme qu’un element du fichier appelant. Les regies sont valables a 
tous les niveaux : les sous-elements d’un sous-element, en supposant 
qu’ils ont les memes i d, seront egalement places a la suite. 

On peut illustrer ce principe par la creation des menus, pour lesquels les 
overlays sont abondamment utilises. Le fichier principal peut specifier 
les elements de menu et les sous-elements qui lui sont propres et, a con- 
dition d’avoir les bons attributs ID, l’overlay peut ajouter apres des 
menus ses propres menus et, a la suite des sous-menus, encore ses pro- 
pres sous-menus. 


Oums Aller-retours cntre I'editeur et le navigateur 

Maintenant que notre extension est dans le dossier 
chrome://, il faut redemarrer le navigateur pour 
qu'il prenne en compte les modifications. A la 
longue, ceci peut devenir extremement penible ; c'est 


pourquoi il existe quelques astuces pour faciliter la 
vie du developpeur. La premiere consiste a activer 
quelques « fonctionnalites cachees » : 


user_pref ("ngl ayout . debug. di sabl e_xul_cache" , true) ; 
user_pref ("ngl ayout . debug. disable_xul_fastload" , true) ; 
user_pref (" javascri pt . optf ons . stri ct" , true) ; 

user_pref(" javascri pt . opti ons . showInConsol e" , true) ; 

use r_p ref ("browser . dom .wi ndow.dump . enabled" , true) ; 


< Desactive le cache XUL. 


< Lie au precedent, facultatif. 

« Active I'affichage de toutes les erreurs d'execu- 
tion. 

< Active I'affichage de toutes les erreurs de syn- 
taxe. 

< Active le dump sur la console, servira pour le 
chapitre sur JavaScript... indispensable ! 


Ces lignes sont a ajouter dans votre fichier prefs. js, 
situe dans -/■ mozi 11 a/fi refox/default. XXX/ sous 
Unix avec Firefox et dans Application Data/ 
Mozi 1 1 a/Profi 1 es/dossi erduprofi 1 depuis le dos- 
sier de I'utilisateur (typiquement : c:\documents and 
setti ngs\jonathan) sous Microsoft Windows avec la 
suite Mozilla. 

Elies permettent d'activer des fonctionnalites utiles 
de debug, comme indique en commentaires. Une fois 
les preferences ajoutees, vous pouvez utiliser une 
ligne de JavaScript comme ceci pour ouvrir I'exten- 
sion dans une autre fenetre : 

open("chrome://xulforum/content" , null , 

"toolbars: no, statusbar : no") 

Vous pouvez inclure cette ligne de code dans une 
balise <scri pt> dans une page HTML, ou tout simple- 
ment la taper dans la console JavaScript (« outils », 


« console JavaScript » dans les menus). Vous obtenez 
ainsi deux fenetres : une avec le navigateur pour 
visualiser de la documentation, du code source 
(pensez a utiliser I'extension webdeveloper pour ouvrir 
vos sources dans un nouvel onglet !) et une autre 
avec I'extension. Comme le cache XUL est desactive, 
vous n'avez qu'a recharger la page correspondant a 
XUL Forum pour voir les modifications apparaftre, en 
pressant la touche F5. 

Cette methode a cependant des inconvenients, le plus 
important etant I'utilisation de techniques de deve- 
loppement dans le meme profil que celui destine au 
Web. Vous pouvez, si vous le desirez, lire I'article du 
wiki du site XulFr sur ce sujet, qui propose I'utilisation 
de deux Firefox en meme temps, avec modification 
des binaires, ou I'utilisation de deux profils separes. 

► http://xulfr.org/wiki/ConfigurerMozillaPourDevelopper 
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Pour l’instant, ce sont nos propres documents qui represented le fichier 
appelant et le fichier overlay. Quand nous integrerons l’application 
« dans » le navigateur, nous definirons de nouveaux overlays, mais cette 
fois-ci, le fichier appelant sera le navigateur et nous y ajouterons nos 
propres sous-menus par exemple. 

Le principe des overlays s’incarne en deux grands types distincts d’utilisa- 
tion. Tout d’abord, il permet de separer des pages complexes en plusieurs 
fichiers, comme nous l’avons fait precedemment. La lisibilite et la clarte 
du code sen trouvent grandement ameliorees. Ensuite, comme nous 
l’avons esquisse precedemment, les overlays permettent de regrouper des 
elements communs a plusieurs fichiers dans un overlay, puis, de ne garder 
que les elements specifiques a chaque page. Ceci peut etre utile pour un 
menu ou une barre de statut qui, a peu de choses pres, seront les memes 
pour toutes les pages. 


Attention Overlays distants 

Pour des raisons de securite evidentes (par exemple, 
I'acces a des fichiers locaux serait possible pour un 
site internet !), il n'est pas permis de charger un 
overlay depuis une source tierce. Autrement dit, tous 
vos overlays doivent etre sur le meme domaine que le 
fichier XUL principal. Un simple fichier XUL local 
incluant un overlay commengant par une URL de type 


http://localhost/ ne marchera que si vous accedez au 
fichier XUL principal via I'URL localhost, mais ne fonc- 
tionnera pas si vous utilisez I'adresse numerique equi- 
valente 127.0.0.1 ! Vous pouvez visualiser I'historique 
de ce bug sur le site de Mozilla, BugZilla, qui les refe- 
rence a I'adresse : 

► https://bugzi I la. mozilla. org/show_bug.cgi?id=1 59450. 


<!-- fichier exemple. xul — > 

<?xm1 version=’1.0' ?> 

<?xu1-over1ay href="http://127.0.0. l/~ jonathan/overlay .xul" ?> 

<wi ndow xm1ns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 

<vbox id="exemp1e"> 

</vbox> 

</wi ndow> 

<!-- fichier overlay. xul --> 

<?xm1 version='1.0' ?> 

<over1ay xml ns=" http://www.mozi! la.org/keymaster/gatekeeper/there.is.only.xul"> 

<vbox id="exemp1e"> 

<description>0ver1ay ici !</description> 

</vbox> 

</over1ay> 

L'overlay fonctionne si I'on visualise http://1 27.0.0. 1 / Ceci est donne a titre informatif si par exemple vous 

-jonathan/exemple.xul mais echoue si I'on utilise http:// decidez de creer une page XUL et de la placer sur un 

localhost/~jonathan/exemple.xul. serveur distant, comme pour la page d'inscription de 

XUL Forum. 
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Un autre avantage pour les overlays est leur implication dans le meca- 
nisme d’extensions Mozilla. Une extension doit, pour s’integrer dans le 
navigateur, rajouter des elements : barres d’outils, entrees dans les 
menus, etc. Ceci se fait au travers des overlays. On enregistre les fichiers 
contenant les overlays aupres du navigateur via le fichier contents, rdf, 
puis on peut etendre les elements constituant l’interface si Ton connait 
leurs attributs ID. Par exemple, l’ID de la barre de statut, en bas de la 
fenetre du navigateur, est status-bar. Si vous connaissez l’extension 
« FoxyTunes » de Firefox, vous comprenez maintenant comment elle 
rajoute ses propres boutons dans la barre de statut ! 


Alternative Include!) et autres langages cote serveur 

Comme nous I'avons vu en introduction, nous developpons nos pages XUL de maniere 
statique : elles ne sont pas creees dynamiquement. II est egalement possible de les con- 
cevoir a I'aide d'un langage de pages web comme ASP ou PHP pour ne citer que les plus 
connus. Si votre application se destine uniquement a un contexte web, le mecanisme 
pourra etre reproduit en utilisant des fonctions telles que includeO en PHP par 
exemple. De maniere plus generale, une fonction afficherBarreDeMenuO pourra 
etre utilisee pour centraliser les elements communs sur une page. 

Dans le code source de Mozilla, c'est le preprocesseur C qui est applique aux fichiers XUL 
(et non au compilateur !). II permet d'adapter les fichiers XUL a inclure, au final, en fonc- 
tion de la plate-forme, ou meme de separer du code sans utilisation d 'overlays. Le pre- 
processeur se charge de remplacer #i ncl ude ff chi eri ncl us . xul par le contenu 
de ff chi eri ncl us .xul . 


Culture BugZilla 

BugZilla est le systeme de gestion de bogues 
(de bugs en anglais) developpe d'abord par 
Netscape, puis repris par Mozilla. Au-dela d'une 
simple base de donnees, BugZilla permet de cen- 
traliser les rapports de bogues, les commentaires 
d'utilisateurs, les documents lies a un bogue et 
egalement de rassembler les demandes d'ame- 
lioration du logiciel. Par exemple, pour I'integra- 
tion du standard Xforms du W3C proposant une 
nouvelle fagon de creer les formulaires, il existe 
un rapport de bogue a I'adresse : 

► https://bugzilla.mozilla.org/ 
show_bug.cgi?id=97806 

qui centralise toutes les fonctionnalites neces- 
saires a la realisation du support de XForms. Les 
commentaires sur ce rapport de bogue permet- 
tent en fait de suivre revolution de son imple- 
mentation. 

► http://bugzilla.mozilla.org 


Le fichier index-barres-overlay.xul : barres 
d’outils, de menu et de statut 

Maintenant que l’interface est decoupee en grands ensembles, nous pou- 
vons attaquer la redaction du premier fichier overlay: index-barres- 
overlay.xul. II contiendra la barre de menu, la barre d’outils et la barre 
de statut. Nous pouvons d’ores et deja enoncer sa structure. 

<?xml versi on="l . 0" ?> 

coverl ay xml ns="http ://www.mozi 1 la.org/keymaster/gatekeeper/ 
there . i s . onl y. xul "> 

<tool box id="xf-index-toolbox"> 

<menubar id="xf-i ndex-menubar"> 

<!-- ici la barre de menu --> 

</menubar> 

<toolbar id="xf-i ndex-tool bar"> 

<!-- ici les boutons avec des images — > 

</tool bar> 

</tool box> 
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<statusbar id="xf-index-statusbar"> 

<!-- ici quelque chose comme du texte, 
une barre de progression... --> 

</statusbar> 

</overlay> 

Lelement ctool box> est une boite verticale speciale, qui place une poi- 
gnee a gauche de la fenetre pour chacun de ses elements, dans le cas de la 
suite Mozilla. Dans le cas de Firefox ou autre, la poignee n’est pas dispo- 
nible. Une toolbox contient, dans le cas du navigateur, les menus, la 
suite de boutons, la barre d’adresses, le Bookmarks toolbar folder , etc. 
Dans notre application, l’element tool box contiendra seulement un ele- 
ment menubar et un element toolbar pour la barre d’outils, qui con- 
tiendra des boutons comme : « nouveau », « editer », etc. 


Les menus 


La premiere chose que l’utilisateur voit apparaitre dans une application 
est la barre de menu. Que ce soit un editeur de texte ou un navigateur, 
toute application digne de ce nom possede des menus. Pour ne pas etre 
en reste, nous allons nous aussi ajouter nos menus a XUL Forum. 

Pour ce faire, nous utiliserons quatre elements : <menubar>, <menu>, 
<menupopup> et <menuitem>. Le premier est un conteneur horizontal : il est 
le premier a etre place dans la <toolbox>. II contiendra les elements 
<menu>. Le second represente le bouton en lui-meme, comme le rectangle 
qui contient le texte Fichier dans un programme classique. Le <menupopup> 
est un conteneur qui s’affiche lorsque Ton clique sur un element <menu>. II 
contient les elements du sous-menu representes par des <menuitem>. Void 
un exemple plus parlant : 


C'est le premier element, la barre de menu. Tout ► 
ce qui concerne un menu sera place dedans. 

Ceci est le premier element de menu. Graphique- ► 

ment, c'est le texte Fichi er et son cadre autour. 

Ce widget structurel represente le popup : ► 

c'est en fait une fenetre avec des elements de 

menu. II peut aussi etre utilise lors d'un die droit. 

C’est un element de menu fixe, qui ne contient ► 
pas d'autres sous-menus. 

Un separateur, represente graphiquement par ► 
une ligne horizontal. 


<menubar i d="xf-i ndex-menubar"> 


<menu label="Fichier"> 


<menupopup> 


<menuitem label="Nouveau sujet" /> 
<menuitem label="Editer le sujet" /> 

<menuseparator /> 


<menuitem label="Quitter" /> 
</menupopup> 

</menu> 
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<menu 1 abel="Connexi on"> 
<menupopup> 

<menu 1 abel="Serveur"> 


<menupopup> 

<menuitem label="Verifier la connexion 
au serveur PHP" /> 

<menuitem label="Verifier la connexion 
** au serveur LDAP" /> 

</menupopup> 

</menu> 

<menuitem label="Reveni r a l'ecran 

d'authentification" /> 


</menupopup> 

</menu> 

</menubar> 


Seule la barre de menu est mentionnee ici. Elle se trouve dans le fichier 
index-barres-overlay.xul. Pour la clarte de l’exemple, les chaines de 
caracteres sont incluses dans le fichier XUL, mais en realite, elles sont 
placees dans une DTD a part, comme nous l’avons vu precedemment. 

Ce menu n’est bien sur qu’un exemple et n’est pas definitif : nous serons 
amenes a le modifier tout au long du developpement. En fait, dans ce 
chapitre, nous construisons surtout une interface statique. Le menu sera 
remodele, retravaille en fonction des besoins, a l’aide de JavaScript et de 

CSS. 

Chose surprenante, l’element <menubar> est facultatif. En fait, vous 
pouvez tout a fait remplacer ce <menubar> par une <hbox>. Mais le rendu 
n’est alors pas du tout le meme ! On trouve des boutons tres fins, avec 
une fleche sur leur droite et un menu qui s’ouvre lorsque Ton clique 
dessus. C’est une utilisation qui peut servir, mais uniquement dans des 
cas tres particuliers. A vous d’essayer ! 


Pour aller plus loin RDF et les menus 

On devine aisement que I'ecriture d’un menu devient longue et fastidieuse des que Ton 
entre dans un niveau de profondeur superieur a deux. L'indentation dans I'editeur devient 
essentielle et, surtout, on se perd a la relecture du code dans des imbrications de menus, 
de menupopups, de menui terns, etc. Une recreation automatique du menu a partir 
d'un fichier decrivant sa structure serait une solution plus efficace : elle est possible au tra- 
vers de la technologie RDF. On decrit le menu dans un fichier separe et on cree le code 
XUL du menu a partir de ce fichier : ce sont les templates. En fait, nous avons vu dans ce 
chapitre la solution la plus « classique ». Lorsque vous aurez lu et compris le chapitre sur 
RDF, vous pourrez essayer cette solution alternative. 


Un deuxieme element de menu. 


Ici, il y a un autre niveau de profondeur : on rem- 
place le menui tem par un menu. 

On reproduit le mecanisme. 
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Figure 5-2 

L'aspect de notre menu 



Des menus plus evolues 

II existe d’autres fonctionnalites pour les elements de menu : ils peuvent 
notamment arborer une case a cocher ou se comporter comme des bou- 
tons radio. Un menu de configuration sera un parfait exemple pour illus- 
trer ceci : des options a choisir ou des cases a cocher sont tout a fait 
utilisables via un menu. 

<menu label="Configuration"> 

<menupopup> 

<menu label="Choix du type d’appel distant"> 

<menupopup> 

<menuitem name="appel" type="radio" label="XML-RPC" /> 
<menuitem name="appel" type="radio" label="SOAP" /> 
<menuitem name="appel" type="radio" label="WSDL" 
checked="true" /> 

</menupopup> 

</menu> 

<menuitem type="checkbox" checked="true" disabled="true" 

label="S’identifier d’abord aupres du serveur LDAP" /> 
</menupopup> 

</menu> 

Nous introduisons de nouveaux attributs par rapport a l’exemple prece- 
dent. Detaillons-les ensemble : 
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• disabled permet, comme son nom l’indique, de desactiver un ele- 
ment de menu (en fait, bon nombre d’elements ont un attribut 
disabled comme les boutons ou les textbox) ; 

• type permet de specifier la nature de l’element : 

- si la valeur est radi o, alors un element et un seul pourra etre selec- 
tionne au choix parmi les elements portant le meme attribut name ; 

- si la valeur est checkbox, alors l’element de menu pourra etre 
coche : une croix apparaitra a gauche de l’element ; 

• checked permet, dans le cas d’un type checkbox de cocher directe- 
ment l’element, ou dans le cas d’un type radio, de choisir l’element 
selectionne par defaut. 

Ceci permet une plus grande variete dans l’utilisation des menus. Si vous 
y tenez, vous pouvez meme, en attendant le chapitre sur les CSS, utiliser 
cette structure pour placer une icone a gauche de lelement <menuitem>. 

<menui tern label ="&i ndex.menu_fi chi er_nouveau; " 
cl ass="menui tem-i coni c" 

image="chrome://xulforum/content/i mages/menu-new. png" /> 


B.A.-BA Mais ou trouve-t-on tous ces attributs ? 

Le developpeur lisant cet ouvrage est en droit de se 
demander ou trouver une reference exhaustive des 
composants XUL. Sachez que I'on recense plus d'une 
centaine de balises ! Or depuis le debut du chapitre, 
les noms d'elements se succedent en rafale, sans force- 
ment que I'on soit capable de les trouver seul. 

II faut savoir que la plupart ne sont utilises 
qu'occasionnellement : les plus courants sont repre- 
sents dans le code de XUL Forum. La reference reste 
cependant le site xulplanet.com sur lequel vous trou- 
verez une liste de tous les elements XUL, XBL, XPCOM 
ou encore des proprietes CSS et consumable en ligne ! 
Vous avez aussi a votre disposition I'annexe des ele- 
ments graphiques les plus utilises. 

La methode la plus courante est d'utiliser LXR pour exa- 
miner comment I'on procede pour obtenir tel ou tel 
comportement ou tel ou tel rendu. Le fichier principal a 
ete presente plus haut : il faut ensuite jongler entre les 
fichiers inclus, le JavaScript et les autres composants. 
Toutes les applications XUL sont egalement une mine 
d'informations : des qu'une extension a un effet ou 
une organisation qui vous interesse, n'hesitez pas a dis- 
sequer le fichier .xpi puis le .jar, pour voir comment 
I'auteur est arrive au resultat qui vous preoccupe. 


La page de reference de I'element sur le site xulplanet 
permettra ensuite de bien comprendre I'utilite de 
chaque propriety. 

II existe enfin une page sur le Web qui montre les dif- 
ferentes utilisations des widgets XUL les plus courants 
ainsi que I'effet de leurs differents attributs. La combi- 
naison des trois devrait vous permettre, une fois seul, 
d'arriver au resultat voulu ! Si vraiment vous ne 
trouvez pas, il reste le forum XUL de xulplanet.com, en 
anglais, ou celui de xulfr.org, la communaute franco- 
phone des utilisateurs de XUL. 

L'astuce « ultime » consiste a utiliser une barre d'outils 
integree a Mozilla, pour aller en un clic a la reference 
d'un objet ! 

► http://www.xulplanet.com/references/elemref/ 

► http://xulplanet.com/forum/ 

► http://lxr.mozilla.org/mozilla/source/browser/base/content/ 

► http://www.hevanet.com/acorbin/xul/top.xul 

► http://xulfr.org 

► http://xulfr.org/outils/ 
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Figure 5-3 

Le menu de configuration 


Les menus sont de suite plus agreables a l’oeil ! Mais cette methode n’est 
pas recommandee ; nous en verrons une meilleure quand nous aborde- 
rons les CSS. 

Nous reviendrons plus en detail sur les classes et les attributs de style 
propres a Mozilla, mais pour l’instant, ces deux attributs vous permet- 
tront de donner une « touche » plus agreable a l’application, qui est pour 
l’instant un peu austere. L’attribut image presuppose que vous avez cree 
un dossier i mages dans content et trouve une icone qui convient. 

Elements communs a toutes les pages 

Notre decoupage en overlays est satisfaisant, mais n’est pas encore par- 
fait. En effet, si Ton veut que la premiere page, celle permettant l’identi- 
fication, puisse elle aussi utiliser les menus, on aura forcement les 
elements « Nouveau sujet » et « Editer le sujet » qui seront presents, 
alors qu’ils n’ont aucune utilite sur cette page. En fait, il faudrait separer 
les elements communs a toutes les pages de l’extension et les elements 
specifiques a chaque page. C’est ce que nous allons faire, en plafant les 
menus dans un overlay particulier et en gardant les elements specifiques 
dans le fichier appelant. 
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Dans index. xul, on ne garde que les trois premiers elements du menu 
fichier, specifiques a cette page. 

<?xul -overl ay href=" chrome : //xul fo rum/content/menus - 
overlay .xul "?> 

clDOCTYPE window SYSTEM "chrome://xulforum/locale/index.dtd"> 

<wi ndow xml ns="http : //www . mozi 11a. org/keymas ter/gate keeper/ 

**■ there . i s . onl y. xul " 
ti tl e="&i ndex . fenetre_ti t re ; "> 

ctool box i d="xf-i ndex-tool box"> 

<menubar i d="xf-menubar"> 

<menu id="xf-menu-fichier"> 

<menu popup id="xf-menupopup-fichier"> 

<menuitem label="&index.menu_fichier_nouveau; " 
cl ass="menui tem-i conic" 
image=" chrome : //xul f or um/content/i mages/ 

**■ menu-new. png" /> 

cmenuitem label="&index.menu_fichier_editer;" /> 

<menuseparator /> 


Vous remarquerez que certains elements ID ont fait leur apparition : ceci 
va s’expliquer par la nature du fichier menus-overlay.xul qui suit : 

<?xml versi on="l . 0" ?> 

clDOCTYPE overlay SYSTEM "chrome://xulforum/locale/index.dtd"> 
coverl ay xml ns=" http: //www. mozi 1 la.org/keymaster/gatekeeper/ 

** there. is. only. xul"> 
ctool box i d="xf-i ndex-tool box"> 
cmenubar id="xf-menubar"> 

cmenu id="xf-menu-fichier" label="&index.menu_fichier;"> 
cmenu popup id="xf-menupopup-fichier"> 

cmenui tem 1 abel="&i ndex.menu_fi chi er_qui tter ; " 
oncommand="window.close() 
id="xf-menu-fi chi er -qui tter" /> 
c/menupopup> 
c/menu> 


Les attributs ID specifies sont les memes que dans index. xul et on 
garde uniquement lelement « quitter », qui se retrouvera sur toutes les 
pages. Comme les elements de l’overlay sont ajoutes a la suite des ele- 
ments du fichier appelant, l’ordre des cmenui tem> est conserve. 

Ce decoupage est plus « fin » que le precedent : le mecanisme d’overlays 
fusionne intelligemment fichier principal et fichiers overlays et la reutili- 
sation de code est plus performante qu’avec le systeme precedent. 
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On peut ainsi faire passer dans le fichier menus-overlay .xul la plupart 
des options de menu de la premiere page, qui restent valides une fois 
arrive sur index. xul. Par contre, on pourra considerer que l’option 
« S’identifier aussi aupres du serveur LDAP » concerne uniquement 
1’ authentication : nous ne la garderons que dans xul forum, xul ; elle 
permettra de choisir si, au moment de l’identification, il faut verifier que 
les informations donnees sont correctes aupres du serveur LDAP ou 
aupres du serveur PHP. 


Le contenu du fichier xulforum.xul 

<?xul -overlay href="chrome ://xul forum/content/menus-overlay . xul "?> 
<!D0CTYPE window SYSTEM "chrome: //xul forum/1 ocale/xul forum. dtd"> 

<wi ndow xml ns="http ://www. mozi 1 la.org/keymaster/gatekeeper/ 

** there . i s . onl y. xul " 

ti tl e="&i dent . fenetre_ti tre ; " width="640" height="480" 
persi st="wi dth height"> 

<tool box id="xf-i ndex-tool box"> 

<menubar id="xf-menubar"> 

<menu i d="xf-menu-configurati on"> 

<menupopup i d="xf-menupopup-confi guration"> 
onenuitem type="checkbox" 

label ="&index.menu_configuration_identification ; " 
checked="true" di sabled="true" /> 

</menupopup> 

</menu> 

</menubar> 

</tool box> 


Le reste du menu Configuration est place dans l’overlay. Si vous essayez 
l’exemple, vous remarquerez que l’application ne se comporte pas 
comme prevu : en effet, le menu Configuration, le premier a etre men- 
tionne dans le fichier appelant, est le premier a etre positionne dans les 
menus. Or nous voulons qu’il soit place en troisieme position. II faut 
done ecrire, dans l’overlay : 

<menu id="xf-menu-fi chi er" 1 abel="&i ndex . menu_fi chi er ; " 

position="l"> 

<menu label="&i ndex. menu_connexion ; " position="2"> 

<menu 1 abel ="&i ndex . menu_confi gurati on ; " 
id="xf-menu-confi gurati on" posi tion="3"> 

Ainsi, avec les attributs position, on choisit une position dans un index 
numerate a partir de 1. Dans les pages futures, nous n’aurons plus a nous 
preoccuper de l’ordre attribue aux differents menus, puisqu’il a ete choisi 
de maniere fixe dans l’overlay. 
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Par contre, dans le menu Configuration, lelement que nous avons laisse 
dans xul forum. xul est place en premier et non pas en dernier comme 
nous aimerions. Nous allons utiliser une autre technique pour forcer son 
positionnement en dernier. Dans l’overlay, nous allons preciser que nous 
voulons que les elements du menu configuration soient places avant 
lelement « S’identifier aupres du serveur LDAP » du fichier appelant, 
d’attribut ID « xf-menu-configuration-identification ». 

<menu label="&index.menu_configuration_appel ; " 

insertbefore="xf-menu-configuration-identi fication"> . . . </menu> 
cmenui tem 1 abel="&i ndex.menu_confi gurati on_menus ; " 
insertbefore="xf-menu-configuration-identi fication"/> 


Astuce Insertbefore, insertafter 

Vous pouvez controler encore plus finement le 
positionnement des elements XUL de menu avec 
I'attribut insertafter, qui permet de preciser 
apres quels elements il faut inserer I'element de 
I'overlay. Ceci n'est pas specifique aux menus : 
vous pouvez egalement appliquer ce procede au 
contenu d'une bofte par exemple. 


Ainsi, nous obtenons le resultat voulu : notre element est place en der- 
nier, car les elements de I’overlay ont ete inseres avant cet element. 


La barre d’outils 

Nous allons maintenant creer la barre d’outils, autre element inevitable 
dans une application graphique. Nous y placerons les quelques boutons 
indispensables : Nouveau pour un nouveau sujet, Editer, Supprimer qui 
concernent un sujet selectionne, Plier, Deplier concernent les pop-ups 
pour les messages et Haut qui permet de masquer tous les pop-ups. 

Une barre d’outils (ou toolbar en anglais) se compose des elements 
suivants : <toolbar>, un conteneur horizontal, qui contient des boutons 
speciaux, <toolbarbutton>. Pour l’instant, nos boutons seront statiques ; 
ils n’auront pas d’effets speciaux selon qu’ils sont enfonces ou survoles 
par la souris, ou encore en-dehors de toute action speciale. Ceci se fera 
avec des CSS, au chapitre suivant. 

ctool bar id="xf-i ndex-tool bar"> 

ctool barbutton i d="i ndex-tool bar- nouveau" 

i mage=" chrome : //xul forum/ content/i mages/new .png" 
tool ti ptext="&i ndex . tool bar_nouveau ; " /> 
ctool barbutton i d="i ndex-tool bar-edi ter" 

i mage=" chrome : //xul forum/content/i mages/edi t . png" 
tool ti ptext="&i ndex . tool bar_edi ter ; " /> 
ctool barbutton i d="i ndex-tool bar-suppri mer" 

i mage=" chrome : //xul forum/content/i mages/del ete . png" 
tool ti ptext="&i ndex .tool bar_suppri mer ; " /> 
ctool barbutton i d="i ndex-tool bar- pi i er" 

i mage=" chrome : //xul forum/ content/i mages/11 ef tar row .png" 
tool ti ptext="&i ndex .tool bar_pl i er ; " /> 
ctool barbutton i d="i ndex-tool bar-depl i er" 

i mage=" chrome : //xul forum/ content/i mages/lri ghtar row .png" 
tool ti ptext="&i ndex .tool bar_depl i er ; " /> 


OuilLS leones, graphiques 

Nous utilisons pour notre application le kit gra- 
phique « lila », avec les icones au format PNG, 
que Ton peut trouver sur le site http://lila- 
theme.uni.ee/. Placees sous licence GPL, ces 
icones s’integrent parfaitement dans notre appli- 
cation, elle aussi en GPL. La taille des icones de 
la barre d'outils est de 32 x 32 et celle des 
menus de 16 x 16. Ce kit est assez complet et 
propose des icones pour la plupart des actions 
courantes, ce qui nous permet de trouver quasi- 
menttoutes les icones necessaires a I'application 
XUL Forum. 
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ctool barbutton i d="i ndex-tool bar-index" 

i mage=" chrome ://xul forum/content/i mages/luparrow. png" 
tool ti ptext="&i ndex . tool bar_i ndex ; " /> 

</tool bar> 


Astuce Personnalisation des barres d'outils 

Apres avoir lu le chapitre sur I'integration dans 
Mozilla, il vous sera possible d'ajoutervos propres 
boutons aux barres d’outils du navigateur. Si vous 
utilisez Firefox, vous pourrez profiter de la fenetre 
« Customize toolbars » avec I'elegant glisser/ 
deposer pour organiser vos boutons. Ceci se fera 
dans le chapitre sur I'integration dans Mozilla, 
quand nous rajouterons un bouton a la barre 
d’outils Firefox pour lancer directement XUL 
Forum. 


L’element toolbar fait toujours partie de l’overlay i ndex-barres- 
overlay.xul. Nous ajoutons des elements <tool barbutton>, en speci- 
fiant deux attributs : image et tooltiptext. Comme nous ne specifions 
pas de texte (l’usage veut que les boutons, comme ceux du navigateur, 
soient uniquement des images), nous specifions le texte d’infobulle, 
c’est-a-dire le texte qui apparait quand l’utilisateur laisse sa souris pen- 
dant un court moment au-dessus du bouton. 

Vous pouvez essayer d’ajouter un attribut label, mais le resultat n’est pas 
tres esthetique, alors qu’avec les boutons, le haut de l’application com- 
mence deja a faire professionnel ! 


La barre de statut 

Enftn, dernier element situe le plus en bas de l’ecran, la barre de statut. 
Une barre de statut est comme une boite horizontale normale, mais elle 
contient des elements speciaux <statusbarpanel>, qui sont responsables 
de la separation nette entre les differents elements de la barre de statut. 
Ce sont des boutons speciaux, qui ne peuvent afficher qu’une image ou 
qu’un texte (et pas les deux a la fois). 

Notre barre de statut contiendra au minimum deux elements : 

• un texte qui affichera ce que fait l’application : connexion au serveur, 
verification de l’identite, etc. 

• une barre d’avancement lors des connexions distantes, representee 
par l’element <progressmeter>. 

<statusbar id="xf-i ndex-statusbar"> 

<statusbarpanel label="Bienvenue sur XUL Forum" /> 
<statusbarpanel flex="l" /> 

<statusbarpanel label="Non lus : 3" /> 

<statusbarpanel label="Total : 5" /> 

<statusbarpanel> 

<progressmeter /> 

</statusbarpanel> 

</statusbar> 

La barre de statut est moins complexe que la barre d’outils ou la barre de 
menu : le texte et la barre d’avancement seront tous les deux manipules 
par JavaScript, nous n’avons pas besoin de nous en occuper pour l’ins- 
tant. 


70 


www.frenchpdf.com 


Nous voulons que le texte de statut soit place a gauche et la barre d’avan- 
cement a droite de l’ecran, avec l’indication du nombre de messages non 
lus et du nombre total de messages : nous raj ou tons entre les deux ele- 
ments un <statusbarpanel> vide, avec un attribut flex a 1. Comme les 
autres n’ont pas d’attribut flex, ils prennent uniquement la place qui leur 
est necessaire, tandis que le <statusbarpanel> qui a l’attribut flex prend 
toute la place qui lui est offerte et permet de coller chacun des elements a ^ 

droite ou a gauche de l’ecran. 

Les cases pour afficher le nombre de messages sont empruntees a 
Thunderbird : on retrouve exactement la meme structure dans le coin 
inferieur droit du navigateur. 

En ce qui concerne l’internationalisation de la barre de statut, nous 
n’avons pas a nous en preoccuper pour l’instant non plus. Comme elle 
sera entierement manipulee par JavaScript, nous verrons dans le chapitre 
qui y est consacre la reponse a la question : « comment gerer l’internatio- 
nalisation avec JavaScript » et sa solution interne. 

Resume : les barres 

Nous avons vu l’utilisation de trois types de barres : 

• la barre de menu, avec l’imbrication des pop-ups, 

• la barre d’outils, avec les boutons speciaux, 

• la barre de statut, avec un autre type de bouton-conteneur. 

II nous faut maintenant construire la partie centrale de l’interface, avec 
l’arbre des messages et la liste des membres. 



Figure 5-4 

L'aspect actuel de la fenetre de XUL Forum 
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Les overlays : arbre et onglets 

Si vous testez le code dans son etat actuel, vous remarquerez un petit 
probleme : chaque element de la fenetre prend l’espace qui lui est neces- 
saire et ne s’etend pas en hauteur (non visible sur la figure precedente, 
pour epargner au lecteur des emotions fortes !). La barre de statut se 
retrouve ainsi a mi-hauteur de l’ecran. Nous avons, d’apres notre croquis, 
decrete que la boite horizontale du milieu devait prendre toute la hau- 
teur possible : nous allons reprendre le code de la fenetre principale et 
rajouter des attributs pour mieux organiser l’occupation de l’espace. 

<toolbox id="xf-index-toolbox" /> 

<hbox nex="l"> 

<vbox i d="xf-i ndex-vbox-membres"> 

<description>Vbox de gauche</descri pti on> 

</vbox> 

<spl i tterxgri ppy /></spl itter> 

<vbox i d="xf-i ndex-vbox-forum" flex="l"> 

<descri ption>Vbox de droite</description> 

</vbox> 

</hbox> 

<statusbar i d="xf-i ndex-statusbar" /> 

Comme la boite horizontale a un attribut flex, elle occupe tout l’espace 
possible et « colle » la barre de statut en bas de la fenetre. Ensuite, a 
l’interieur de cette boite horizontale, on met un attribut flex pour que la 
boite de droite prenne tout la largeur possible. Sans ces precautions, 
nous nous retrouverions avec la barre de statut vers le milieu de l’ecran et 
les deux boites verticales serait collees a gauche de l’ecran, ce qui n’est 
pas tres esthetique. Les attributs flex permettent done de forcer des ele- 
ments a occuper tout l’espace possible, ce qui est plus seyant, notre 
fenetre etant amenee a subir des redimensionnements multiples. Ainsi, 
quelle que soit la taille de la fenetre, l’espace sera toujours occupe au 
maximum. Si on avait mis un attribut flex sur la boite de gauche, elle 
aurait eu une largeur trop grande pour les onglets et le resultat n’aurait 
pas non plus ete tres joli, avec un grand espace vide entre les onglets et la 
poignee du milieu. Vous pouvez la encore jouer sur les attributs f 1 ex 
pour tester differents resultats. 

Une fois remplie la partie de gauche concernant les membres, celle-ci 
aura une largeur minimum, du fait de ses onglets, et nous pourrons 
garder tout l’espace restant pour le forum lui-meme. 

Les etapes preliminaires etant maintenant achevees, nous pouvons rem- 
plir chacune de ces boites. 
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L’arbre 


L’idee est ici decrire un arbre d’exemple, pour voir ensuite comment il 
sera possible de le manipuler a l’aide de JavaScript. Nous n’irons pas au- 
dela d’un seul niveau de profondeur, pour ne pas nous perdre dans 
l’imbrication des balises, deja assez importante avec un seul niveau. 

i 

m 

<?xml versi on="l . 0" ?> 

clDOCTYPE overlay SYSTEM "chrome ://xul forum/1 ocal e/xul forum . dtd"> 

<overl ay xml ns="http ://www.mozi 1 la.org/keymaster/gatekeeper/there . i s . onl y . xul "> 

<vbox i d="xf-i ndex-vbox-forum"> 

<label value="La liste des sujets du forum" /> 

<tree id="xf-index-arbre" flex="l"> 

<treecol s> 

<treecol id="xf-i ndex-arbre-titre" label="Titre du sujet" flex="8" /> 

<splitter cl ass="tree-spl i tter" /> 

<treecol id="xf-i ndex-arbre-date" label="Dernier message le flex="l"/> 

<splitter cl ass="tree-spl i tter" /> 

ctreecol id="xf-i ndex-arbre-reponses" 1 abel="Nombre de reponses" flex="l"/> 

</treecol s> 

<treechi 1 dren> 

<treei tem> 

<treerow> 

<treecell label="Un exemple de titre de sujet" /> 

<treecell label="20/02/05 16:30" /> 

<treecell label="l" /><!-- on retrouve trois elements car on a specifie 

trois colonnes, comme dans le <grid> deja vu --> 

</treerow> 

</treei tem> 

</treechi ldren> 

</tree> 

</vbox> 

</overl ay> 


Void le fichier index-forum-overlay. xul, mentionne lorsque nous avons 
ecrit le squelette principal de la page. 


Alternative Un arbre HTML ? 

Pour I'instant, tout ce que nous avons vu est realisable en XHTML, meme s'il y aurait quel- 
ques difficultes a rendre une barre d'outils « propre ». Les menus seraient realisables avec 
des CSS judicieusement utilisees, comme I'illustre le site d'Eric Meyer. 

► http://meyerweb.com/eric/css/edge/menus/demo.html 

On pourrait egalement penser aux frames du HTML pour le decoupage de I'interface en 
plusieurs elements, ou meme aux tableaux, pour tout ce qui concerne la repartition de 
I'espace entre les differents elements. Mais maintenant, pour un arbre hierarchique, XUL 
va vraiment demontrer sa superiorite par rapport a un client de type leger. Un arbre n'est 
pas plus complexe que les autres elements, alors qu'en HTML, il n'est certainement pas 
possible d'implementer simplement un arbre de ce type ! 
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► http://www.xulplanet.com/references/ 
elemref/ref _treecol.html 

► http://www.xulplanet.com/references/ 
elemref/ref _tree.html 


II contient principalement un element tree, avec un attribut flex a 1, 
pour qu’il occupe toute la hauteur de la boite verticale dans laquelle il est 
place. Chaque colonne est annoncee sous la forme d’un element 
<treecol> place dans un conteneur <treecols>. Les splitters, deja vus 
precedemment, possedent cette fois une classe speciale qui leur permet 
d’adopter une largeur de 1 pixel et de permettre le redimensionnement des 
colonnes du tableau. Les attributs flex servent a repartir l’espace entre les 
colonnes. Une derniere colonne est ajoutee automatiquement : c’est le 
column picker , qui permet de choisir quelles colonnes afficher ou masquer. 
Vous pourrez alors utiliser des attributs comme hi dden pour ne pas les affi- 
cher par defaut, ou i gnorei ncol umnpi cker pour ne pas les afficher dans le 
selecteur de colonnes. La liste complete des attributs de la balise 
<treecol> se trouve sur le site de xulplanet.com. 

Lelement tree possede aussi des attributs interessants, comme 
alternatingbackground, pour alterner la couleur des lignes, ou 
enableColumnDrag, pour permettre a l’utilisateur de deplacer les colonnes 
et reagencer leur succession avec un glisser/deposer. 

Void maintenant l’exemple revu, avec un nouveau niveau de profondeur, 
pour les reponses a un sujet. 


index-forum-overlay.xul, avec un nouveau niveau de profondeur 

<?xml version="1.0" ?> 

<!DOCTYPE overlay SYSTEM "chrome://xulforum/locale/ 
xulforum.dtd"> 

<overl ay xml ns="http : //www . mozi 11a . org/keymas ter/gate keeper/ 
there.is.only.xul"> 

<vbox id="xf-i ndex-vbox-forum"> 

<label val ue="&i ndex .arbre_label_ti tre ; " /> 
ctree i d="xf-i ndex-arbre" flex="l"> 

<treecol s> 

<treecol i d="xf-i ndex-arbre-ti tre" 
label="&index.arbre_titre;" flex="8" primary="true"/> 
<splitter class="tree-splitter" /> 

<treecol i d="xf-i ndex-arb re-date" 

label="&index.arbre_date; " flex="l"/> 

<splitter class="tree-splitter" /> 

<treecol i d="xf-i ndex-arbre- reponses" 

label="&i ndex. arbre_reponses ; " flex="l"/> 

</treecol s> 

<treechildren> 

<treeitem container="true"> 

<treerow> 

<treecell label="Un exemple de titre de sujet" /> 
<treecell label="20/02/05 16:30" /> 

<treecell label="l" /> 

</treerow> 

<treechil dren> 

<treeitem> 
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<treerow> 

ctreecell label="Reponse au premier sujet" /> 
<treecell label="21/02/05 00:05" /> 

<treece11 /> 

</treerow> 

</treeitem> 

</treechi 1 dren> 

</treei tem> 

</treechi 1dren> 

</tree> 

</vbox> 

</over1 ay> 

Plusieurs choses ont ete modifiees. La premiere colonne a maintenant un 
attribut primary, qui indique qu’elle se destine a contenir des elements 
imbriques et que c’est dans cette colonne que devra etre affiche le petit + 
ou - selon que lelement est deplie ou non. Le <treeitem> a son attribut 
container a true, puisqu’il se destine a contenir d’autres elements. En 
effet, a la suite du <treerow>, on reitere le precede d’ajout dune ligne, 
mais cette fois a un nouveau niveau de profondeur, avec un nouveau 
ctreechi 1 dren>. Le resultat peut etre visualise, il est fonctionnel. Cet 
arbre n’est bien sur qu’un exemple, il sera destine a etre manipule avec 
JavaScript et RDF un peu plus loin. 


La liste des membres 

La liste des membres, derniere grande partie de l’interface, se composera 
de deux onglets, l’un pour la liste des membres, l’autre pour voir des 
informations sur un membre particulier. Ce sera le fichier index- 
membres-overlay.xul. 

<?xm1 versi on="l . 0" ?> 

<!D0CTYPE overlay SYSTEM "chrome://xu1forum/1oca1e/xuiforum.dtd"> 
<over1 ay xml ns="http ://www.mozi 1 la.org/keymaster/gatekeeper/ 

** there . i s . onl y. xul "> 

<vbox i d="xf-i ndex-vbox-membres"> 

<label value="Les membres du forum" /> 

<tabbox fl ex="l"> 

<tabs> 

<tab label="Liste des membres" /> 

<tab label="Infos sur le membre" /> 

</tabs> 

<tabpanel s flex="l"> 

<tabpanel> 

<1 istbox> 

<listitem label="Jonathan" /> 

<listitem label="Stephane" /> 

<listitem label="Muriel " /> 

<!-- etc. tout cel a sera modi fie avec IS — > 

</l istbox> 
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</tabpanel> 

<tabpanel> 

<vbox> 

<hbox> 

<i mage src=" chrome ://xul for urn/ content/01. png" 
width="32" height="32"/> 

<description flex="l">Nom du personnage 
</descri ption> 

</hbox> 

<label value="Age: 18 ans" /> 

<label value=" Localisation: Bordeaux" /> 

<label value="Posts: 55" /> 

</vbox> 

</tabpanel> 

</tabpanel s> 

</tabbox> 

</vbox> 

</overlay> 

L’utilisation d’un panneau a onglets ressemble fortement a celle d’un 
arbre : d’abord la liste des onglets, puis la liste des panneaux. Les attri- 
buts flex places sur tabpanels et sur tabbox obligent les panneaux a 
prendre toute la hauteur disponible dans l’ecran. 

Chaque element tab annonce un panneau et represente de maniere con- 
crete l’onglet en lui-meme, c’est-a-dire le petit conteneur de forme 
arrondie dans les angles, contenant le titre de chaque panneau. A chaque 
element tab doit correspondre un element tabpanel . 

Ensuite, les tabpanels sont places. II est possible de remplacer le 
tabpanel par un element unique, mais ceci n’est pas recommande. L’ele- 
ment tabpanel est encore un conteneur vertical special, dont l’orienta- 
tion se choisit grace a l’attribut orient. Les panneaux peuvent etre places 
sur la gauche, en bas, etc. La reference complete est une fois de plus la 
meilleure amie du developpeur ! 

Dans le premier panneau, on insere une liste des personnes presentes via 
l’element <listbox>: a chaque entree dans la liste correspond un 
<listitem>. Cet element sera manipule avec JavaScript. 

Ensuite, dans le deuxieme panneau, on prepare l’ecran qui sera construit 
dynamiquement lorsque l’utilisateur demandera a voir des informations 
sur un membre en particulier. On y trouve la photo de l’utilisateur (une 
photo d’exemple est utilisee pour voir le resultat), quelques informations 
le concernant, ainsi que sa description. L’idee est surtout de s’arranger 
pour voir comment gerer les attributs flex, la repartition de l’espace et le 
positionnement des differents textes. 
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OHHSQQQ 

Les membres du forum 

Liste des membres Infos sur les membres 


© 


Nom du personnage 


Age: 18 ans 
Localisation: Bordeaux 
Posts: 55 


La liste des sujets du forum 


Titre 


1 Dernier message le Reponses |e^| 


□ Un cxcmplc dc titre dc sujet 20/02/05 16: 30 


Repunse <au piemiei sujel 21/02/05 00.05 


Bienvenue sur XUL Forum 


Non lus : 3 Total : 50 


I 

in 


Figure 5-5 

Le resultat final sous Linux avec KDE, 

Firefox et le theme Lila. 

Vous remarquerez que I'on a ajoute des titres 
aux deux parties, membres et arbre. 


En resume... 

Nous ne nous sommes pas attardes sur le remplissage des elements du 
milieu de l’interface : il faut se dire que nous posons juste les bases et que 
tout cela sera manipule avec JavaScript ou rempli automatiquement avec 
RDF. Par contre, les menus et les barres d’outils sont des elements plus 
importants qu’il faut repartir soigneusement entre plusieurs fichiers, afm 
de pouvoir par la suite les incorporer facilement dans n’importe quelle 
page. 

L’interface, en version statique, de XUL Forum, est maintenant quasi- 
ment definitive. Nous avons successivement code : 

• les barres d’outils : menu, boutons, barre de statut, 

• le decoupage en overlays du menu, en separant les elements 
« globaux » des elements specifiques a chaque page, 

• les boites du milieu de l’ecran, avec des ebauches d’arbre et de liste 
des membres, qui seront manipulees plus tard avec JavaScript. 

Quel est le travail restant sur l’interface ? Surtout l’integration des graphi- 
ques, avec des effets sur les boutons au passage de la souris, des icones pour 
certaines options de menu, mais aussi la mise en forme : mise en relief des 
titres, choix des polices, des effets sur les polices... bref, de la presentation 
par des CSS ! 
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Perfectionnement 
du rendu avec CSS 


L’interface commence a etre fmalisee mais n’est pas encore 
parfaite : il lui manque la « touche finale » en termes de rendu, 
que nous realiserons grace a des CSS. 


SOMMAIRE 

► Effets simples : mise 
en forme de texte 

► Retouches structure! les : 
modifications des marges 
et bordures 

► Proprietes propres a Mozilla 
icones des menus, boutons 
de la barre d'outils 

MOTS-CLES 

► Selecteurs CSS 

► Propriety list-style-image 

► -moz-xxxx 
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XUL Forum ressemble maintenant a quelque chose. L’interface ne bou- 
gera quasiment plus dans sa structure, les widgets XUL sont choisis et 
positionnes. Cependant, elle garde quelques defauts : des titres pour- 
raient etre mis plus en relief, des elements ont une bordure trop impor- 
tante, les boutons de la barre d’outils ne sont pas aussi bien realises que 
ceux de la fenetre du navigateur... une retouche de l’ensemble de Impli- 
cation avec CSS s’impose ! 


> http://openweb.eu.org/articles/cascade_css/ 


Culture CSS Zen Garden 

CSS Zen Garden est un site « vitrine » du CSS. En 
variant indefiniment la feuille de style d'un meme 
document HTML, il montre toutes les possibility 
de CSS et I'importance de la feuille de style dans le 
rendu d'un document bien presente. A partir d'un 
meme document HTML, des feuilles de style chan- 
gent radicalement la conception du site. 

► http://www.csszengarden.com/ 
?cssfile=http://www.css-praxis.de/cssocean/ 
zenocean.css 

► http://www.csszengarden.com 

► http://csszenga rden ,com/?cssf i le=http:// 
www.sprae.com/csszen/EmptinesslsZen.css 


Presentation de CSS ; utilisation dans Mozilla 

CSS, ou Cascading Style Sheets , se decline en plusieurs versions. La pre- 
miere version, CSS1, a ete adoptee comme recommandation du W3C 
en 1996. Son but etait de proposer un langage normalise visant a defmir 
le style des pages web et de mettre fin aux styles proprietaires propres a 
chaque type de navigateur. La particularite de ce projet etait de proposer 
un modele en cascade : le style specific par l’auteur pouvait etre modifie 
par les preferences de l’utilisateur. Ce concept de cascade se retrouve plus 
en detail lorsque Ton cree une feuille de style : selon que le style est place 
directement dans le document, qu’il concerne un groupe delements ou 
un element particulier, il n’a pas la meme priorite et, par consequent, pas 
la meme hauteur dans la cascade ! (Voir le lien sur l’excellent article 
d’OpenWeb ci-contre.) Les implementations correctes de CSS1 virent 
le jour en 2000 avec Microsoft Internet Explorer pour Mac OS, mais 
aussi des navigateurs alternatifs comme Opera ou, bien sur, Mozilla. 

La seconde version de CSS fut adoptee comme recommandation en 
1998. Cependant cette version, peut-etre trop ambitieuse, n’est toujours 
pas entierement implementee, et ce dans quelque navigateur que ce soit. 
CSS 2.1, sorte de version revue et corrigee, a elague toutes les specifica- 
tions qui n’avaient pas ete implementees. A ce jour, la prochaine version 
CSS 3 est toujours en cours de developpement. 

La norme CSS, dans le monde du Web, est utilisee principalement pour 
permettre la separation du contenu logique (ecrit en HTML) et de 
l’apparence. Lorsqu’on cree une page web avec CSS, le document 
HTML est structurel : des balises comme hi ou strong prennent tout 
leur sens : « titre principal » pour hi, « texte a mettre en relief » pour 
strong. La feuille de style, separee du document HTML, precise com- 
ment rendre graphiquement cette structure du document. Souvent, plu- 
sieurs feuilles de style sont disponibles, offrant un choix a l’utilisateur. 
Malheureusement, cette utilisation ideale de CSS n’est le plus souvent 
une realite que sur les sites crees par les ardents defenseurs de 
l’accessibilite ! Le reste des developpeurs web ne s’en servent fmalement 
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que pour gagner du temps dans la redaction du HTML. II ne faut 
d’ailleurs pas ignorer les nombreux bogues d’implementation de CSS 
dans les navigateurs, qui freinent encore son adoption massive. Citons a 
ce titre le celebre bogue du modele de boite de Microsoft Internet 
Explorer, qui oblige les developpeurs web a exploiter les consequences 
imprevues de ce probleme pour rendre correctement leur document sur 
tous les navigateurs ! 

Dans Mozilla, CSS est utilise un peu differemment. Bien sur, toutes les 
possibilites offertes dans un contexte web se trouvent implementees. On 
aura done toujours l’interface structurelle, decrite en XUL et la presenta- 
tion graphique, ecrite en CSS. Mais Mozilla propose egalement ses pro- 
pres extensions complementaires a CSS. Celles-ci vont de simples effets 
visuels (tels que des bordures arrondies ou la gestion de la transparence) 
a des proprietes plus complexes comme l’attribution pour un widget du 
fichier XBL lui correspondant. Nous allons d’abord voir les proprietes 
« classiques » de CSS, puis ensuite les proprietes propres a Mozilla. 


► http://en.wikipedia.org/wiki/ 
lnternet_Explorer_box„model_bug 


i 

kO 

Culture « Cutting edge CSS » 

Voici I'adresse de la celebre Complex Spiral 
Demo, creee par Eric Meyer, un auteur reconnu 
dans le domaine des CSS. Elle montre, si votre 
navigateur est compatible, ce qu'il est possible 
d'accomplir en utilisant les seules CSS, en une 
eblouissante prouesse technique. Sous Mozilla, il 
ne devrait pas y avoir de probleme ! 

► http://meyerweb.com/eric/css/edge/ 
complexspiral/demo.html 


Attention CSS, un must du developpement web 

Lorsque I'on vient d'un environnement web qui laisse 
une large part a la programmation (comme les habi- 
tues de PHP/MySQL), on a tendance a considerer CSS 
comme un gadget, une alternative sympathique mais 
inutile face a une mise en forme en HTML quick & dirty 
(vite et pas tres propre). II faut cependant garder a 
I'esprit ses nombreux avantages pour les sites web, 
dont voici quelques exemples : 

• Bande passante economisee. En centralisant la 
mise en forme dans un seul fichier CSS, les naviga- 
teurs mettront la feuille de style dans leur cache 
local une bonne fois pour toutes, pour I'ensemble 
des pages consultees. 

• Separation totale de la presentation et du 
contenu. Les navigateurs en mode texte ou a des- 
tination des mal ou non-voyants ou encore les 
anciens navigateurs afficheront le contenu de 
maniere claire. Les moteurs de recherche eux aussi 
« comprendront » mieux votre site, lui donnant 
sans doute une meilleure visibility ! Par ailleurs, les 
nouveaux vecteurs de communications (comme les 


PDA ou les telephones portables) auront une mise 
en page correcte du contenu de votre site. 

• Modularity accrue. Au moment ou vous aurez a 
changer les polices de caractere utilisees dans votre 
site, vous n'aurez qu'un attribut CSS a modifier ! 

• Compatibility. Standardisees et completes, les 
CSS limitent la necessity d'extensions proprietaires 
a I'origine de la « balkanisation » du Web. 

Nous vous encourageons fortement a utiliser les stan- 
dards pour creer votre site web - en vous gardant 
toutefois de verser dans I'integrisme : il n'est toujours 
pas possible de concevoir un site uniquement en 
XHTML et CSS : ce serait mettre de cote le rendu des 
navigateurs d'ancienne generation. Le livre de Jeffrey 
Zeldman est une reference en la matiere : I'auteur 
propose des mises en page hybrides, utilisant XHTML 
et CSS sans pour autant laisser de cote des naviga- 
teurs tels que Netscape 4 ou Internet Explorer 4. 

IB Design web - Utiliser les standards, Jeffrey Zeldman, 
Eyrolles 
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Debuts avec CSS : effets sur du texte 

Mise en place de CSS 

Comme a notre habitude, nous allons commencer par l’ecran 
d’authentification : il fera un bon point de depart pour nos premiers 
effets CSS. Le premier probleme qu’il convient de resoudre est le place- 
ment des styles. Oil les ranger ? Directement dans le document XUL ? 
Dans une feuille de style a part, comme en HTML ? Les integrer en 
tant que feuille de style XML ? 

La premiere solution est a eliminer tout de suite, car le but de CSS est 
justement de separer la structure de l’apparence. Le developpeur doit 
pouvoir facilement changer de feuille de style pour son application XUL 
sans avoir a modifier les fichiers XUL des qu’il veut changer l’aspect de 
XUL Forum. De plus, ces styles ont une priorite importante qui fait que, 
generalement, ils ecrasent les styles definis dans le theme Mozilla. Les 
styles inline, c’est-a-dire contenus dans l’attribut style dune balise 
XUL, sont done a eviter, de meme que les balises <style>. 

La seconde solution utiliserait une declaration de type : 

| <link rel="styl esheet" . . .> 

bien connue dans le monde du HTML. Mais pourquoi utiliser une 
balise HTML alors que Mozilla et ses fichiers XML conformes permet- 
tent d’utiliser la syntaxe XML pour appliquer une feuille de style ? 

Nous utiliserons done la syntaxe la plus adaptee a nos fichiers XUL, 
qui sont avant tout des fichiers XML : e’est la ligne de type <?xml - 
stylesheet... ?> que nous ajouterons dans le prologue XML de 
xulforum.xul. 

<?xml -styl esheet href="chrome://xulforum/skin" type="text/css" ?> 

Cette ligne remplace la ligne precedente qui importe le theme global de 
Mozilla. Mais le theme global n’est pas oublie pour autant. II sera sim- 
plement importe depuis le skin de XUL Forum pour plus de simplicity 


Alternatives CSS dans content ? 

Si vous dissequez les extensions Firefox disponibles, vous remarquerez que toutes ne sont 
pas respectueuses de la structure tripartite d'une extension et qu'elles placent leurs 
fichiers CSS dans le dossier content. Ceci permet un gain de temps appreciable, car il 
n'y a pas a avoir un autre fichier contents . rdf, ni a creer un autre dossier. Cependant, 
si vous voulez proposer une extension a XUL Forum, comme un theme assorti a Firefox, il 
faut absolument respecter cette structure qui garantit une large modularite. 
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Vous remarquerez qu’une fois de plus, le fichier est place dans une URL de 
type chrome : xul forum . css sera dans le dossier skin de l’application. II est 
done necessaire de creer le fichier contents, rdf du dossier skin, afin de 
pouvoir enregistrer 1’habillage de XUL Forum aupres du navigateur. 

<?xml versi on="l . 0"?> 

<RDF : RDF xml ns : RDF="http ://www.w3 . org/1999/02/22-rdf-syntax-ns#" 
xml ns : chrome="http ://www.mozi 1 la.org/ rdf/chrome#"> 

<RDF : Seq about="urn : mozill a : skin : root"> 

<RDF:li resource="urn:mozina:skin:classic/1.0" /> 

</RDF : Seq> 

<RDF : Descri pti on about="urn: mozill a: skin: cl assic/1.0"> 

<chrome : packages> 

<RDF : Seq about="urn: mozill a: skin : cl assi c/1.0: packages'^ 

<RDF:li resour ce="urn: mozill a: skin: classic/1.0: xul forum"/> 

</RDF : Seq> 

</chrome:packages> 

</RDF : Descri ption> 

</RDF : RDF> 


Ce fichier est tres similaire a celui definissant la locale fr-FR, vue prece- 
demment. D’abord, on precise que ce qui va suivre concerne l’habillage 
classic/1.0, nom utilise en interne pour designer l’habillage classique de 
Mozilla. Ensuite, on remplit l’element Description se referant au skin 
classique. On indique que Ton va y ajouter un nouveau paquet, en 
l’occurrence un paquet concernant XUL Forum. 

Nous ajoutons done au skin classique le paquet correspondant au com- 
posant XUL Forum. Mais attention, il ne s’agit pas de redefinir toutes les 
proprietes CSS du theme mais simplement de remplacer certaines pro- 
prietes globales par celles de notre application ; e’est pourquoi nous 
commencerons notre fichier xul forum . css par cette ligne : 

©import url ("chrome://global/skin") ; 

Cette ligne indique que nous integrons d’abord l’ensemble des proprietes 
CSS definies par le skin en cours du navigateur, pour ensuite apporter nos 
propres modifications. Ainsi, nos proprietes CSS auront priorite par rap- 
port aux proprietes globales, puisqu’elles seront definies plus haut dans la 
cascade CSS. 


COMPRENDRE Les habillages (skins) 
dans Mozilla 

L'idee importante a saisir est celle du concept 
d'habillage ou skin dans Mozilla. Un habillage est 
un ensemble de paquets concernant chacun une 
partie de I'interface Mozilla. A la base, se situe 
I'habillage classique, qui contient par exemple des 
paquets definissant I'habillage global, celui du 
navigateur, du client de messagerie, etc. Peut s'y 
ajouter un habillage personnalise, si I'utilisateur le 
desire. Ce peut etre le skin fourni appele modem, 
ou un autre disponible sur le site update. 
mozilla.org. Les proprietes specifies dans le 
fichier de skin de I'utilisateur ecrasent celles pre- 
sentes au depart dans I'habillage classique. 


Culture Effet des CSS sur une application XUL 

Nous avons integre la feuille de style globale du navigateur des le premier chapitre d'ecri- 
ture de XUL. Ainsi, notre application a immediatement ete integree dans le navigateur. Si 
vous voulez voir quel est I'effet des CSS sur XUL Forum, supprimez la directive d'import 
du skin global dans xul forum, css. Vous verrez alors le fichier XUL « a nu », sans sa 
CSS. La structure du fichier est bien la, mais toute la presentation a disparu ! En fait, nous 
avons deja profite largement des CSS mais sans trap nous en rendre compte. 
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Comme pour le dossier content , le fichier par defaut utilise pour l’URL 
chrome ://xulforum/skin/ est xul forum. css. Ceci permet d’utiliser un 
raccourci dans les prologues XML. 

Meme si notre skin est defini comme appartenant par defaut au skin 
classique, il sera tout de meme choisi si le skin de l’utilisateur est diffe- 
rent, puisqu’il n’y a pas d’autre choix. On peut en revanche imaginer que, 
lorsque XXJL Forum sera internationalement connu, les concepteurs de 
skin integreront des skins pour XXJL Forum, qui pourront ecraser ce que 
nous avons defini dans le skin classique pour XUL Forum. 

II faut maintenant finaliser l’installation du skin : rajoutez une ligne au 
fichier installed-chrome.txt : 

ski n , i nstal 1 , url ,file:///mnt/data/Livre/xulforum/skin/ 

Bien sur, vous devrez adapter le chemin vers votre repertoire de travail. 
Le mieux est de vous fonder sur la ligne precedente du fichier, qui doit 
etre celle de votre locale. 

Supprimez chrome, rdf, n’oubliez pas de creer le fichier xulforum.css 
basique dans le dossier skin, relancez le navigateur et pointez-le sur 
chrome: //xul forum/content. II n’y aura aucun changement visible et ceci 
est parfaitement normal ! Nous avons juste cree l’habillage de base, mais 
nous n’y avons rien mis encore ! Desormais, les modifications que nous 
allons placer dans xulforum.css seront apparentes. 

Premiers effets sur du texte 

Maintenant nous pouvons commencer a agir concretement sur l’apparence 
rendue du fichier xul forum. xul. La premiere chose qui s’impose est de 
mettre plus en relief le titre Identification. On ne voit pas assez, quand on 
arrive sur la page d’accueil de XUL Forum, que Ton demande a l’utilisa- 
teur de s’identifier. Pour cela, nous pouvons ajouter dans xul forum . css : 

.titre { 

font-weight: bold; 
background-color: white; 

} 

C’est ici un selecteur de classe qui est employe, afin de pouvoir centra- 
liser des attributs communs a tous les elements jouant le role de titre. En 
effet, l’element titre est ici un caption. Cependant, dans la page sui- 
vante, index. xul, les elements titres seront de type label. Les attributs 
precises ici seront done communs aux deux elements caption et label, 
portant l’attribut class="titre". Nous preciserons plus loin les attributs 
CSS specifiques aux elements titres 1 abel . 


Rappel Annexe 

Vous pourrez retrouver la liste des principales pro- 
prietes CSS en annexe D, ainsi qu'une remise en 
situation de sa syntaxe. 
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B.A.-BA Syntaxe CSS 

Les fichiers CSS suivent une syntaxe fort simple. Elle ressemble 
plus ou moins a ceci : 

selecteur { 
attributl: vafeurl; 
attribut2: vafeur2; 

} 

Les attributs seront introduits au fur et a mesure de ce chapitre, 
lorsque nous en aurons besoin. Pour une liste complete des attri- 
buts, une recherche sur Internet a « CSS Reference » vous donnera 
un bon nombre de resultats. 

► http://www.w3schools.com/css/css_reference.asp 
CO R. Goetter, CSS 2 - Pratique du design web, Eyrolles 2005 
CO J. Zeldman, Design web - Utiliser les standards, Eyrolles 
2005 

CO E. Meyer, CSS - Precis et Concis, O'Reilly 2004 
CO E. Meyer, CSS par Eric Meyer, CampusPress 2005 


En ce qui concerne les selecteurs, nous les decouvrirons de meme 

au fur et a mesure de ce chapitre. Voici les principaux : 

• label {} pour toucher tous les elements 1 abel . 

• label.titre {} pour tous les 
-clabel cl ass="ti tre" .../>. 

• label#premierTitre {} pour I'unique 
-clabel id="premierTitre" .../>. 

• hbox label {} pour tous les <1 abel > indus dans une 
<hbox>, un ou plusieurs niveaux de profondeur en-dessous de 
la balise <hbox>. 

• hbox > label {} pour les <1 abel > directement enfants 
du <hbox>, sans intermediate. 

• .tit re pour tous les elements portant I'attribut 
cl ass="ti tre". 

• #ti trePri nci pal pour tous les elements portant I'attribut 
i d="ti trePri nci pal ". 

Une reference complete des selecteurs CSS est egalement dispo- 

nible en annexe. 


Nous n’utilisons que deux attributs tres simples : font-weight, qui pre- 
cise le « poids », c’est-a-dire la graisse de la police : ici, bol d pour une 
police en gras. D’autres valeurs existent, par exemple bolder ; des valeurs 
numeriques sont egalement possibles, mais moins usitees. Background- 
color, comme son nom l’indique, precise la couleur de fond, ici, le blanc. 

On pourrait etre tente de choisir une autre couleur de fond que le blanc, 
pour etre plus en accord avec le theme actuel. Ainsi, si vous avez Mozilla 
et le theme moderne, vous choisirez peut-etre un bleu pour cette 
background color. Mais il faut garder a l’esprit un point important : l’utili- 
sateur aura quasiment toujours un style different de celui du deve- 
loppeur. C’est pourquoi, lorsque Ton ecrase les reglages du theme 
principal, comme c’est le cas ici, il faut se garder d’utiliser des couleurs 
trop criardes. Ici, le blanc est assez neutre et s’accommodera de la plupart 
des themes imaginables. 


B.A.-BA Couleurs en CSS 

En CSS, il existe plusieurs moyens de specifier une 
couleur. Pour les couleurs les plus courantes, une 
valeur litterale (bl ue, red, whi te, etc.) suffira. 
Pour plus de precision, on utilise souvent la syn- 
taxe HTML #012345 composee de trois nombres 
hexadecimaux a la suite. Notez qu'on peut abreger 
une couleur comme #00CCFF en #0cf (majus- 
cules ou minuscules n'ont pas d'importance). II 
existe enfin une derniere forme, peu courante : 
rgb(0, 0,255) ou rgb(0%,0%, 100%) par 
exemple. 

Vous trouverez a I'adresse suivante un tres bon 
outil qui utilise le CSS et permet d'ajuster facile- 
ment la couleur ideale : 

► http://meyerweb.com/eric/tools/ 
color-blend/ 


OuilLS Wysiwyg dynamique pour I'edition de CSS dans Mozilla Firefox 

Si vous avez installe Mozilla avec la Web Developer Toolbar (disponible sous forme 
d'extension pour Firefox), en selectionnant dans le menu CSS View Style Information, 
vous pourrez, en promenant votre souris sur I'ecran, voir le selecteur le plus detaille qui 
correspond a I'element sur lequel est place votre souris. Souvent, toutes les balises 
parentes sont precisees, alors qu’en pratique, on utilise des selecteurs plus simples, ne 
reprenant generalement que les deux demiers elements de la liste. 
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II faut maintenant modifier le fichier XUL pour indiquer que l’element 
caption qui contient le titre du cadre appartient bien a la classe titre. 

<caption cl ass="ti tre" label="&ident . ti tre ; " /> 


Astuce « Sidebars » pour une reference 

Si vous ne les connaissez pas encore, n'hesitez pas 
a installer les barres de DevEdge (I'ancien site des 
developpeurs Netscape, ferme mais en cours 
d'integration au site mozilla.org), pour avoir 
rapidement sous vos yeux la reference de tel ou tel 
element CSS ou HTML. Ce type d'outil se revele 
vite, a I'usage, indispensable ! Une fois ces barres 
installees, vous y accederez rapidement avec le 
touche F9 sous Mozilla. 

L' equivalent existe pour les elements XUL et se 
trouve sur le site xulfr.org 
► http://devedge-temp.mozilla.org/toolbox/ 
sidebars/ 


II suffit simplement d’ajouter cet attribut a la balise et d’actualiser la 
page (en supposant que vous avez desactive la mise en cache XUL). 

Le titre ressort alors de maniere plus flagrante, ce qui est plus agreable a 
l’oeil et plus lisible pour l’utilisateur ! Bien sur cet effet est fort simple, 
mais il permet de mettre en evidence la methode. 

Nous sommes maintenant prets a appliquer du style a un element plus 
complique. Des variantes sont naturellement possibles dans le fichier 
CSS, pour nos elements label de index. xul, indiquant Les membres du 
forum ou La liste des sujets du forum. Vous pouvez meme, si vous le 
desirez, vous amuser avec les premiers effets sur ce titre : text- 
transformation, font-style, text-decoration, border-color, border- 
width, border-style, font-family, color, a vous de decouvrir leurs dif- 
ferentes utilisations ! 


Figure 6-1 


Identification 
Votre nom : 


Votre mot de passe : J” 


Maintenant, nous pouvons par exemple nous occuper des titres interme- 
diates de lecran principal. Void la definition CSS qui leur correspond : 

1 abel . ti tre { 

border: lpx dotted navy; 
margin: 5px; 
padding-left: 5px; 
color: #036; 

} 

Pour les elements label de la classe titre, nous ajoutons une bordure 
d’un pixel en pointilles. L’attribut border est un raccourci. Nous pour- 
rions le detailler en : 

1 abel . ti tre { 

border-width: lpx; 
border-style: dotted; 
border-color: navy; 

} 
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L’attribut margin signale qua l’exterieur de la bordure, il doit y avoir cinq 
pixels de distance avec les autres elements. L’attribut padding-left 
indique quant a lui que, entre la bordure gauche et le debut du texte, il 
doit y avoir egalement cinq pixels. Il existe bien sur toutes les variantes 
pour chacun de ces deux attributs : margin-left, margin-right, 
margin-top, margin-bottom, margi n, ainsi que paddi ng , padding-left, 


i ft****^ 

, TEXTE 0 


Figure 6-2 

Representation des grandeurs margin et 
paddi ng. Le trait en pointilles represente la 
limite exterieure de I'element. Le trait continu 
represente sa bordure, qui peut elle aussi avoir 
une largeur. 


La couleur est quant a elle specifiee sous la forme abregee de #003366. 
C’est un bleu marine qui n’est pas trop agressif. On aurait aussi pu cen- 
trer le texte dans les label. Ceci se fait avec la propriete text- 
align: center;. 

En ce qui concerne l’onglet Informations sur un membre, on peut la aussi 
effectuer quelques modifications pour en rendre la lecture plus agreable. 

label . i nfosMembre : hover { 
text-decoration: underline; 

} 

descri pti on#nomPerso { 
font-weight: bold; 

} 

image#avatar { 

border: lpx solid black; 
width: 33px; 
height: 33px; 

} 


► http://devedge.entangledesign.com/ 
sidebars/css2.1/CSS21/selector.html#q15 


Le premier selecteur utilise un pseudo-style, specific apres les deux 
points. Un pseudo-style sert a defmir un cas particulier pour un element, 
par exemple lorsque cet element est survole par la souris (c’est le cas de 
hover), ou lorsque le lien a deja ete visite (attribut visited des liens 
HTML). La liste complete est disponible dans la reference CSS. 
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On souligne ainsi du texte comme « Ville: Bordeaux » lorsque l’utilisa- 
teur passe la souris dessus, pour lui en faciliter la lecture. 

Pour l’element description contenant le pseudonyme de l’utilisateur 
selectionne, on se contente de le mettre en gras, pour le faire ressortir au 
milieu des informations secondaires de l’onglet. 

Enfin, pour l’image, on specific ses dimensions dans le fichier CSS, ce 
qui rend une migration a des images de taille superieure plus aisee. Les 
dimensions sont augmentees d’un pixel, pour prendre en compte le pixel 
de la bordure. La propriete border est elle aussi un raccourci. Void sa 
forme developpee : 

border-width: lpx; 
border-color: black; 
border-style: solid; 

Le tag de l’image de l’utilisateur dans le fichier XUL est done fortement 
allege. Par contre, il ne faut pas oublier d’ajouter les attributs id et class 
sur les differents elements du panneau. Void a quoi ressemble le fichier 
XUL maintenant : 

<vbox> 

<hbox> 

<i mage src=" chrome ://xui forum/content/01. png" id="avatar"/> 
<description fiex="l" id="nomPerso" vaiue="Nom du personnage" /> 
</hbox> 

<1abel cl ass="i nfosMembre" va1ue="Age: 18 ans" /> 

<1abel cl ass="i nfosMembre" va1ue="Loca1isation: Bordeaux" /> 
<1abe1 cl ass="i nfosMembre" va1ue="Posts: 55" /> 

</vbox> 

Enfin, si pour des questions de gout, la police utilisee par defaut ne vous 
plait pas, vous pouvez choisir la votre. En CSS, nous utiliserons le selec- 
teur universel pour appliquer une police a tous les elements. 

* { 

font-family: Helvetica, Arial , Sans-Serif; 

} 

II ne faut surtout pas oublier de terminer la liste des polices possibles par 
une police standard, que le navigateur utilisera en derniers recours s’il n’a 
pas reussi a trouver une des polices precedentes. 
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Si vous vous demandez comment Ton obtient 
I'effet par defaut sur tel ou tel element (par 
exemple, quels sont les parametres que le theme 
en cours utilise pour styler les boutons, les zones 
de texte...), il vous suffit de prendre I'archive .jar 
du theme (generalement disponible dans le dos- 
sier chrome de ^installation du navigateur, ou 
dans votre dossier personnel (par exemple : 
~\Appl i cation Data\Mozi 1 1 a\Prof i les 
\defauit\qwgopars.sit\chrome) et de 
la renommer en .zip pour pouvoir en extraire le 
contenu. Dans le dossier global de I'archive, vous 
pourrez alors examiner quels sont les effets 
appliques par le theme a tel ou tel element et 
eventuellement les reutiliser pour XUL Forum. 



Figure 6-4 Si vous n'avez pas acces directement au fichier .jar, 
il faut d'abord ouvrir le fichier .xpi (au prealable renomme en .zip) 


i 

SO 


i^l tunleiil/giii-iioliriei 
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Fichier Edtion Affichage 

Fayoris OUtils ? 


a 

Precedente ’ 

^ y Rechercher Dossiers 
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Adresse content/gm-notifier 



vjH« 


Gestion du dossier 


ff~l Extraire tous les fichiers 


Autres emplacements 

IpH content 
Q Mes documents 
lr=?> Onrintfints 
favor is reseau 


3 


Gestion des fichiers 

Deplacer ce fichier 
Q Lop«er ce fichier 
$$ Pubfer ce fichier sur le Web 
X Supprimer ce fichier 


gm-notifier.css 

Css file 

Date de modification: samedi 26 
fevrier 2005, 17:16 
Taille : 2,38 Ko 
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gm-console.xul 


yiu-luyii i. js 

Javascript File 
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gm riotificr.js 
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Image PNG 


& 
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gm-sm-overlay.xul 


| gm.gif 

| grn-fb-overlay.x 




gm-logo.png 

Image PNG 


gm-notifier.css 


gm-pref erenres. yi i 


gm-sm-uninstaller.js 

Javascript Hte 


Figure 6-5 Ensuite, dans le dossier chrome, on trouve un fichier .jar qui, une fois 
renomme en .zip et etudie, nous fournit I'integralite des fichiers de I'extension 
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Retoucher le positionnement avec CSS 

Apres les effets de texte, on peut encore trouver quelques points a 
ameliorer : marges, bordures, espacement entre elements peuvent etre 
retouches. 

Les panneaux pour les membres sont par exemple colies au splitter a 
droite et a la limite de l’ecran a gauche. On peut les decoder des bords en 
forfant des marges a gauche et a droite : 

tabbox { 

margin-left: 5px; 
margin-right: 5px; 

} 


Figure 6-6 

Sur cette capture d'ecran, 
on peut voir I'espace libere 
a gauche et a droite 


INUUVCC1U 


Les membres du forum 

Liste des membres | Infos sur les membres 

Jonathan 

Utilisateurl 


Til 


► I 


On peut aussi rajouter un texte associe aux boutons de la barre d’outils et 
utiliser CSS pour forcer le texte a etre place sous le bouton. 

<tool barbutton i d="i ndex-tool bar-nouveau" 
tool ti ptext="&i ndex . tool bar_nouveau ; " 

1 abel="Nouveau" /> 

Avec ce code seul, le texte Nouveau sera place juste a droite du bouton. 

Figure 6-7 


~J Nouveau 
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II manque la definition CSS suivante : 

tool barbutton { 

-moz-box-orient: vertical; 

} 

L’attribut -moz-box-orient force le bouton de la barre d’outils a etre un 
conteneur vertical. Car l’element tool barbutton est en fait un conteneur, 
qui contient une image cliquable et un texte. 

Mais -moz-box-orient n’est pas defini dans les standards du CSS : en 
fait c’est une extension Mozilla a CSS. Nous allons reprendre l’exemple 
du bouton de la barre d’outils pour l’expliquer en detail. 
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CSS specifique a Mozilla 


La barre d’outils 


Pour la barre d’outils, nous allons personnaliser les boutons de telle sorte 
qu’au passage de la souris, leur aspect change : ils seront mis en sur- 
brillance. 


i 

kO 


Si vous regardez le fichier CSS chrome: //navi gator/skin/ 
navi gator, css (pour la suite Mozilla), vous pourrez etudier les diffe- 
rentes proprietes appliquees aux boutons de la barre d’outils. En void un 
exemple (issues du theme Orbit) : 


#back-button { 

1 i st-styl e-i mage : url ("chrome : //navigator/ski n/o3-imap-nav-back . png") ; 
-moz-image-region : rect(0px 46px 42px Opx) ; 

} 


Pour l’element d’id back-button (le bouton precedent de la barre 
d’outils), le theme precise l’URL de l’image a utiliser pour ce bouton. A 
partir de maintenant, nous allons preciser les images a afficher pour les 
boutons de la barre d’outils directement dans le fichier CSS. Ceci evite, 
lors d’un changement d’aspect de l’application, de devoir toucher aux 
fichiers XUL. Ainsi, si on change totalement le theme de XUL Forum, 
images comprises, nous n’aurons que les fichiers CSS a modifier (et de 
plus, les images seront placees dans le dossier skin, ce qui simplifie le 
tout). 


La propriete list-style-image indique l’image a utiliser pour la puce 
dans un element de type liste. L’image remplace le rond typiquement 
utilise en HTML (mais par defaut invisible en XUL). Ici, l’element 
tool barbutton est un element de type liste et son texte est specific via 
l’attribut 1 abel du fichier XUL. Son image est quant a elle specifiee dans 
le fichier CSS. Si Ton precise le texte et l’image, sans attributs supple- 
mentaires, on aura un effet similaire a celui visible dans l’illustration. 

Cet effet sera comme nous l’avons vu annule avec la directive -moz- box- 
orient: vertical 


Nouveau 


Figure 6-8 


Si vous avez la curiosite d’aller voir comment est constitute l’image du 
bouton, vous remarquerez qu’en fait elle contient quatre images collees 
les une aux autres : ce sont les differents etats du bouton. 


© © 


© 


Figure 6-9 

Les quatre etats du bouton precedent : normal, 
survole par la souris, enfonce et desactive 
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Pour un vrai theme Mozilla, il y en a quatre : etat normal, etat survole 
par la souris, etat presse (lorsque le bouton de la souris est enfonce) et 
etat desactive. Pour XUL Forum, nous n’en garderons que deux. 

Enfin, la directive -moz-i mage-region indique que la portion d’image 
utilisee sera un rectangle, exprime sous la forme rect (a , b , c , d) . 

• a est la distance entre le haut de l’image et le haut de la portion a 
retenir ; 

• b est la distance entre le bord gauche de l’image et le bord droit de la 
portion a retenir ; 

• c est la distance entre le haut de l’image et le bas de la portion a 
retenir ; 

• d est la distance entre le bord gauche de l’image et le cote gauche de 
la portion a retenir. 


Figure 6-10 

Les grandeurs a, b, c, d utilisees 
pour definir un rectangle. 



o 

© 

Figure 6-11 

Le type d'icone utilise pour XUL Forum 


Ainsi, nous pouvons recapituler tous ces attributs dans notre style 
general qui sera applique a tous les elements tool barbutton : 

tool barbutton { 

-moz-image-region: rect(0px 32px 32px Opx) ; 

-moz-box-orient: vertical; 
border: 0 Mmportant; 
font-size: xx-small; 

} 
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On precise que Ton ne veut selectionner que le rectangle de 32 x 32 
superieur de l’image, que l’image et le texte du bouton doivent etre 
superposes et qu’il n’y a pas de bordure. L’attribut de taille de police con- 
cerne le texte de legende place sous l’image du bouton. En choisissant 
une petite taille, on le rend plus discret, moins flagrant que les menus, 
car il a en effet une importance moindre. 

Comme toutes nos images seront constitutes de la meme fafon (les deux 
images de 32 pixels sur 32 superposees), il est possible de specifier la 
portion d’image a utiliser directement dans le selecteur d’elements de 
type tool barbutton, ce que nous faisons ici. 

Ainsi, pour les toolbarbuttons survoles par la souris, nous afficherons la 
deuxieme image, celle placee en dessous. Nous soulignerons aussi la 
legende du bouton lorsque Ton passe la souris sur le bouton. 

tool barbutton : hover { 

-moz-image-region : rect(32px 32px 64px Opx) ; 
text-decoration: underline; 

} 

Il reste a definir pour chaque bouton l’image qui lui correspond. 

tool barbutton#i ndex-tool bar-nouveau { 

1 i st-styl e-i mage : 

url ("chrome ://xul forum/ski n/i cones/new. png .double") ; 

} 

tool barbutton#i ndex-tool bar-edi ter { 

1 i st-styl e-i mage : 

url ("chrome : //xul forum/ski n/i cones/edi t . png . doubl e") ; 

} 

/* ... proprietes pour les autres boutons ... */ 


Astuce L'attribut ! important 

Lorsque, parmi les multiples specifications 
(feuille de style basique, theme, feuille de style 
de I'utilisateur, feuille de style de XUL Forum), 
on veut qu’un element ait plus d'importance 
que d'autres, meme si ceux-ci sont places plus 
haut dans la cascade des CSS, on lui accole le 
mot-cle ! important. Ainsi, lorsque nous 
voulons enlever la bordure, nous ecrasons a 
coup sur tout ce qui a ete specifie auparavant. 
Cette astuce peut etre combinee avec une autre, 
pour eviter que le theme n'impose ses choix : la 
propriete -moz-appearance : none; qui 
annule les eventuelles ameliorations destinees a 
mieux integrer XUL dans le theme du systeme 
d'exploitation. Les deux peuvent etre combines 
comme ceci : 

-moz-appearance: none ! important; 


i 


Autres proprietes CSS 

Les onglets du panneau de gauche 

Nous allons, grace a CSS, rajouter un effet sur les onglets, qui ne s’adres- 
sera qua l’onglet actif. En effet, Mozilla met a jour dynamiquement la 
propriete selected des elements tab, a chaque changement d’onglet 
actif. Si sa valeur est true, l’onglet sera selectionne. Dans le cas inverse, 
la valeur de cet attribut sera false. Vous pouvez d’ailleurs specifier ces 
attributs dans le fichier XUL, pour selectionner des le depart un onglet 
autre que le premier de la liste ; vous pouvez ainsi mettre sur le deuxieme 
onglet sel ected="true". 
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Nous allons done specifier dans le fichier CSS le style qui s’appliquera 
aux elements tab portant l’attribut selected="true". 

tab[selected="true"] { 

text-decoration: underline; 
color: #036; 

} 

Ce nouveau selecteur qui fait son apparition permet de selectionner, 
parmi les elements tab, ceux dont l’attribut selected a la valeur desiree. 
On les souligne et on choisit une couleur similaire a celle des titres. 

Couleur des lignes de I’arbre 

Pour pousser la personnalisation de l’interface un peu plus loin, nous 
allons specifier des couleurs alternees pour les differentes lignes de 
l’arbre. Une ligne sur deux sera legerement grisee pour simplifier la 
visualisation des autres informations comme la date, le nombre de 
reponses, etc. 

Le CSS sera un peu different de ce que nous avons vu precedemment. 
En fait, tous les elements treecell, treerow sont purement structurels. 
Concretement, ce ne sont que les elements treechildren qui ont une 
representation graphique. Nous allons done utiliser un selecteur special 
pour les elements treechildren. 

treechi 1 dren : : -moz-tree-row(odd) { background-color: #EEEEEE; } 
treechi 1 dren : : -moz-tree-row(sel ected) { background-color: 
#ffe3ff; } 

treechildren: :-moz-tree-cell-text(selected) { color: 
rgb(26%, 31%, 39%); } 

Rappel Pseudo-classe 

Pour une liste complete et des explications plus 
detaillees sur ce concept CSS, I’annexe D est a 
votre disposition. 


treechi 1 dren :: -moz-tree-row(sel ected , odd) {} 

Enfin, pour les textes des cellules, lorsque ces dernieres sont en etat 
selectionne, on choisit une couleur de texte bleu marine. 


La pseudo-classe : -moz-tree-row selectionne les treechildren consti- 
tuant une ligne. Le parametre odd, signifiant « impair » en anglais, 
indique qu’on choisit les lignes impaires. On leur applique une couleur 
de fond gris clair. 

Quand une ligne est selectionnee, sa couleur de fond devient rose. II est 
possible de combiner differents parametres pour, par exemple, choisir 
une couleur de fond pour les lignes selectionnees impaires et une couleur 
de fond pour les lignes selectionnees paires. On utilise alors : 
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Figure 6-12 Le rendu final pour I'arbre : 
la ligne selectionnee est en rose et les lignes impaires sont en gris 

On peut egalement creer soi-meme ses proprieties pour un element de 
I’arbre. Ainsi, on peut definir une cellule de cette maniere : 

ctreeceff properti es="nonl u" label="Reponse au premier sujet" /> 

II est alors possible de choisir une image pour les cellules de type « non 
lu », dans le fichier CSS a l’aide de la propriete list-style-image. 

treechi ldren : : -moz-tree-i mage(nonl u) { 

1 i st-styl e-i mage : 

url ("chrome ://xul f o rum/con tent/images/non-1 u . png") ; 
margin-right: 2px; 

} 

Ceci sera particulierement utile lors de la creation de I’arbre : il suffira 
juste de mettre la bonne valeur a l’attribut properties pour avoir imme- 
diatement l’icone correspondante. Et par la suite, avec un peu de 
JavaScript, des qu’un message sera lu, nous pourrons lui enlever sa pro- 
priete nonl u et lui rendre de nouveau son aspect normal. 

Enfin, pour la liste des membres, on peut reutiliser les couleurs de 
I’arbre, avec le CSS suivant, qui mettra les lignes selectionnees en rose : 

listitem[selected="true"] { 
color: rgb(26%, 31%, 39%); 
background: #ffe3ff; 

} 

Images dans les menus 

Nous avons vu rapidement dans un chapitre precedent qu’il etait pos- 
sible d’associer une icone a un element de menu. Nous avions alors uti- 
lise la propriete i mage et specifie l’URL de l’image directement dans le 
fichier XUL. Maintenant que la technologie CSS est exploitee dans 
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notre application, nous pouvons utiliser la desormais celebre propriete 
list-style-image pour choisir FURL de l’image depuis le skin. 

<menui tem 1 abel="&i ndex .menu_fi chi er_nouveau ; " 
cl ass="menui tem-i conic" 

src=" chrome : //xul forum/content/i mages/menu -new. png" 
id="xf-menu-fi chi er- nouveau "/> 

Voila comment nous avons obtenu la petite icone placee dans fentree de 
menu Fichier>Nouveau, grace a une technique peu elegante. Nous pou- 
vons maintenant supprimer Fattribut src et ajouter dans xul forum. css : 

#xf-menu-fi chier-nouveau { 

1 i st-styl e-i mage : 

url ("chrome ://xul forum/content/i mages/menu-new. png") ; 

} 

Utilisation d’une propriete propre a Mozilla 

Enfin, pour illustrer les possibility offertes par les extensions CSS de 
Mozilla, on peut courber legerement le cadre de l’ecran 
d’authentification : 

groupbox { 

-moz-border-radi us : 5%; 

} 

Selon votre theme, vous aurez soit des bords arrondis au cadre, soit des 
angles brises. C’est en quelque sorte la touche finale a notre parcours du 
CSS. 
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En resume... 

Nous avons termine Finterface de XUL Forum. Maintenant que la couche 
de CSS est en place, a la fois la structure et Fapparence sont finies. 

• Des mises en formes en apparence simples ont permis de mettre en 
relief differents titres dans les deux pages actuelles de XUL Forum. 

• Nous avons ensuite retouche de maniere plus structurelle les marges 
ainsi que Fespacement entre les differents elements. 

• Des mises en forme propres a Mozilla ont modifie la barre d’outils, 
pour rajouter du texte sous les boutons ou pour changer Faspect d’un 
bouton au passage de la souris. 

• Enfin, les mises en forme finales ont rajoute des icones dans les 
menus, des couleurs dans les listes et dans l’arbre. 
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Figure 6-13 

La partie statique est desormais terminee : il est grand temps de rendre 
cette application un peu plus dynamique grace a JavaScript ! 
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Identification 


et sans rec/taryement / 


Identification 

' \ 

Votre nom : 

Votre mot de passe : j | 

Votre DN exact | j=xulf orum ,ou=utilisateurs| 

URL du fichier de configuration lilhost.Honathan'params xrj 

Ignorer I'identification aupres du serveur LDAP Q 
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SOMMAIRE 

Notre application est maintenant fort agreable a l’oeil, mais 
terriblement figee. En effet, il n’y a rien de dyn antique ! Nous 
allons remedier a cela grace a JavaScript... 


MOTS-CLES 

► DOM 

► Instanciation de 
composants XPCOM 

► Piles 


► Concepts de base du langage 

► Une premiere manipulation 
d'elements 

► Recuperation d'un fichier de 
configuration exterieur 

► Premiere utilisation d'un 
composant XPCOM 
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Dans les chapitres precedents, nous avons successivement mis en place 
l’application dans le contexte du navigateur, realise les differentes pages 
de XUL Forum, mis de l’ordre dans l’apparence avec CSS, separe les ele- 
ments communs a toutes les pages, mais nous n’avons toujours qu’un 
XUL Forum fige, incapable d’interagir avec son environnement. 

C’est ici que JavaScript intervient : le langage bien connu des deve- 
loppeurs web est bien plus puissant qu’il n’y parait et nous allons nous 
attacher a faire bien plus qu’un inopportun pop-up publicitaire ! 


> Http://www. ecma-international.org 


Attention DOM avec PHP4 et PHP5 

Nous serons amenes a utiliser PHP5 plus en 
avant dans ce livre. II faut faire attention a 
I'interpretation que I'on fait du terme 
« extension DOM » en parlant de PHP. Le DOM 
est normatif : les langages qui respectent cette 
recommandation garantissent des fonctions, des 
attributs, des methodes identiques. Ainsi, la 
manipulation DOM se fera de la meme fagon 
entre JavaScript et PHP5, a la syntaxe du lan- 
gage pres : PHP5 et JavaScript sont tous deux 
des langages qui respectent la norme DOM. 

En revanche, PHP4 n’est pas conforme a la 
norme DOM. II est done deconseille d'utiliser ce 
langage pour manipuler des documents XML. 


WWW 


Concepts de base du langage 

Appele LiveScript durant sa phase de developpement, JavaScript connut 
sa premiere version publiee, la 1.0, avec la sortie de Netscape Navigator 
2.0. Ce langage a ensuite ete implements au sein du navigateur Internet 
Explorer de Microsoft sous le nom de JScript, avec quelques variantes. 
Pour repondre au probleme d’implementations concurrentes, avec cha- 
cune leurs specificites, un organisme de standardisation, l’ECMA, a 
publie differentes versions de la norme ECMA-262, qui standardise le 
langage sous le nom d’ECMAScript. La standardisation comprend des 
elements comme les structures switch, les exceptions, etc. 

A l’heure actuelle, les navigateurs de la fondation Mozilla utilisent 
SpiderMonkey, l’implementation JavaScript de Mozilla ecrite en lan- 
gage C. Derivee du projet initial de Netscape, elle porte le numero de 
version 1.5 et est conforme a la norme ECMA-262 v3. Les deux autres 
implementations majeures, celle d’Opera et de Microsoft, JScript 1.5, 
sont elles aussi conformes a la norme. 

Parallelement a JavaScript existe le DOM. II ne faut pas confondre les 
deux. Le DOM est une recommandation du W3C qui definit de faqon 
neutre la maniere d’acceder au contenu d’un document HTML ou 
XML (ce qui concerne aussi les XUL, naturellement), de le manipuler, 
de le modifier et de gerer des evenements. Contrairement a JavaScript, la 
maturite des implementations du DOM varie selon les navigateurs, la 
plus conforme a l’heure actuelle etant celle de Mozilla. II existe des API 
DOM pour tous les langages : C, PHP, etc. 

Une des idees reipies les plus tenaces consiste a affirmer que JavaScript et 
Java sont similaires. II n’en est rien ! Meme s’il existe des ressemblances 
syntaxiques, le nom de JavaScript a ete choisi lors d’un communique de 
presse commun a Netscape et a Sun Microsystems, pour des raisons 
commerciales diront certains. Quoi qu’il en soit, les deux langages sont 
independants. Ils peuvent cependant se completer et JavaScript peut 
controler une applet Java. 

frenchpdf.com 



o. 

u 

to 

fO 

Beaucoup de gens pensent aussi que JavaScript est un langage simple, 
qui ne sert qua ouvrir des fenetres publicitaires dans les pages web. Nous 
allons nous efforcer de demontrer au travers de cet ouvrage que Java- 
Script soutient aisement la comparaison avec d’autres langages : couche 
objet, exceptions, securite, en font un candidat de choix pour le pro- 
grammeur. 

Syntaxe de base 

Nous allons parcourir rapidement les caracteristiques de ce langage, afm 
de nous remettre en memoire sa syntaxe. Le but ici n’est pas d’etre 
exhaustif, au contraire, mais de mettre rapidement le lecteur en situation, 
afin de lui permettre de saisir l’utilite de JavaScript dans le cadre de XUL. 

Pour vous former en JavaScript, ou obtenir une reference, il existe des 

ouvrages specifiques. Cependant, avec des connaissances de base en pro- ::! JavaScri Pf la reference chez 0 Reilly 
grammation, la transition ne devrait pas etre trop difficile ! 

Variables, utilisation de fonctions 

Les instructions en JavaScript sont toutes terminees par un point- 
virgule, comme en C ou en Java. 

dump(" JavaScri pt roxOrz") ; 
var err = "Erreur ! " ; 

Les variables sont declarees grace au mot-cle var. Le langage n’est pas 
type, c’est-a-dire que lorsque vous creez une variable, vous pouvez lui 
faire contenir du texte, un nombre, un objet, toujours en ecrivant var 
mavariable = quel quechose ; 

Les fonctions comme dumpO dans l’exemple ci-dessus s’utilisent de 
maniere courante, c’est-a-dire fonction(argumentl, argument2, etc.); 

Commentaires 

Les commentaires, de meme qu’en C++, s’ecrivent de la maniere 
suivante : 

//un commentai re qui s’etale sur une ligne seulement 
/* commentai re qui peut 
prendre 
plusieurs 
1 ignes 

V 
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ChaTnes 

Les chaines sont placees entre guillemets doubles ou simples et se conca- 
tenent grace a l’operateur +. 

var machaine = "J ’additionne" + "plusieurs" + "chaines"; 
var autrechaine = "J ’additionne" + 

"sur" + "plusieurs lignes"; 
var erreur = "Je ne peux pas 

couper ma chaine sur deux lignes 
sans guillemets"; 

La derniere ligne provoque quant a elle une erreur car il est indispen- 
sable de fermer ses chaines avant le saut de ligne (comme en C). 

Declarations de fonctions 

Les fonctions se declarent comme en C, sauf que Ton omet les types, le 
langage etant non-type. 

function foo(bar) { 
dump(bar) ; 

} 

dump est une fonction qui agit sur des chaines : l’argument bar de la fonction 
foo sera automatiquement converti en chaine au moment de le passer a 
dumpQ . 


Outils Debogage efficace en JavaScript 


II est indispensable d’avoir les bons outils pour programmer effica- 
cement en JavaScript. Le premier d'entre eux est la console Java- 
Script, qui affiche toutes les erreurs non gerees par le program- 
meur. Elle se lance de deux manieres : au demarrage, via I'option 
de la ligne de commande - j sconsol e, ou dans Mozilla, dans les 
menus OutilsIOptionsIDeveloppement Web. 


Enfin, le debogueur JavaScript Venkman, indus dans Mozilla et 
disponible sous forme d'extension pour Firefox, vous permet de 
manipuler dynamiquement votre document, pour essayer diffe- 
rentes proprietes du DOM, sans avoir a recharger continuellement 
la page. C'est un interpreter direct de code JavaScript. II existe 
aussi des fonction de debogage a proprement parler, avec des 
breakpoints, mais ceux-ci ne semblent pas fonctionner avec des 
fichiers XUL (uniquement avec des fichiers HTML). 


Cette technique se revele tres utile, car elle permet d'afficher des 
informations durant la phase de developpement uniquement, I'uti- 
lisateur final n'ayant generalement ni active les fonctionnalites de 
debogage, ni acces a la sortie standard 


En dehors de la console JavaScript, il existe aussi la sortie 
standard ; c'est la fonction JavaScript dumpO qui permet d'y affi- 
cher du texte. Cette fonction n'est disponible que si vous avez suivi 
les instructions du chapitre 5, pour activer les fonctionnalites de 
debogage, par I'intermediaire de votre fichier prefs. js. Sous 
Unix, la sortie standard est accessible en langant Mozilla depuis un 
shell. Sous Microsoft Windows, vous devrez demander a Mozilla 
d'ouvrir une fenetre MS-Dos grace a I'option de la ligne de com- 
mande -consol e. 


► http://www.svendtofte.com/code/learning_venkman/ 
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Methodes d’objets 

En ce qui concerne les objets, ils sont partout ! On accede a la methode 
d’un objet grace a l’operateur point: objet.mamethodeQ. Ainsi, pour 
arrondir un nombre, on utilisera la methode toPrecision de l’objet 
Number (tous les nombres sont des instances de l’objet Number, toutes les 
chaines sont des instances de l’objet Stri ng, etc.). Ceci est le meme prin- 
cipe qu’en Java : tous les types primaires sont convertis en objets le 
moment venu (technique d’autoboxing). 

var n = 3.14159; 

var pi = n . toPreci si on (3) ; //pi est une chaine 

dumpC'Pi vaut : "+pi+" a trois chiffres si gni fi cati fs\n") ; 

/* insertion ci-dessus d’une nouveiie iigne grace au caractere 
special \n, a inserer entre doubles guillemets */ 
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Attention Langage non type 

II ne faut pas se meprendre : les variables ont 
bien un type, qui peut etre soit un nombre, soit 
une chaine. On peut d’ailleurs I’obtenir grace a 
la fonction typeof(). Mais le programmeur 
n'a generalement pas a s'en soucier, car les con- 
versions sont dans la plupart des cas automati- 
ques. Ainsi, dans I'exemple ci-contre, n, qui est 
un nombre, serait convert automatiquement en 
chaine si on le mettait a la place de pi : 
" . . . "+n transforme n en instance de I'objet 
String. Si Ton veut etre plus precis, on dira 
que c'est grace a la methode toStri ng de la 
dasse Number. 


Tableaux 

Les tableaux sont des instances de la classe Array. II n’existe pas de 
tableaux associatifs (on utilisera plutot des objets) ; les tableaux dispo- 
sent done uniquement d’index. 

var a = new ArrayO . 
a[0] = "un element"; 
a[l] = 3; 

var a = new Array(5) ; 

//tableau de 5 elements, done index all ant de 0 a 4 
var a = new Array("un element", 1.41, 3); 


Objets : instanciation 

C’est dans son rapport au modele objet que JavaScript differe d’un En- 
gage traditionnel. Un objet est cree en appelant une fonction et cette 
fonction a le droit d’acceder a I’objet this, pour eventuellement le rem- 
plir (proprietes, methodes). En void un exemple : 

function funcl() { 
dump("Methode ! ") ; 

} 

function foo(bar) { 
this. bar = bar; 
this. fund = fund; 

} 

var mabarre = new foo("bar") ; 
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La fonction foo est utilisee ici comme le constructeur de l’objet foo et 
peut done acceder a this. Elle definit une propriete pour l’objet et une 
methode, qui est en fait une variable contenant une reference vers une 
autre fonction. On pourra ainsi utiliser dump(foo. bar) et foo.funcl(). 

Nous n’utiliserons que rarement cette syntaxe pour declarer nos objets. II 
en existe deux autres, que nous verrons plus loin. 


Exceptions 

JavaScript est bel et bien un langage evolue : il a sa propre gestion des 
exceptions. 

try { 

throw new Exception( 

"1 ’exception n’est pas toujours celle que 1 ’on croit"); 

} catch (e) { 

al ert("Erreur ! "+e) ; 

} finally { 

//instructions executees quoi qu’il arrive 

} 

Ici s’affichera un message d’erreur dans une boite de dialogue : 
« Reference error, class Exception not defined ». En effet, la classe 
Exception n’existe pas et le moteur de JavaScript nous lance une erreur, 
car nous voulons utiliser une classe qui n’existe pas ! Et l’exception n’est 
pas celle que nous avons demandee, e’est une autre qui proteste contre 
1’ absence de classe Exception. 

La classe correcte est la classe Error, 
try { 

throw new Error("Erreur de notre part") ; 

} catch (e) { 

al ert("Erreur ! ”+e) ; 

} finally { 

//instructions executees quoi qu’il arrive 

} 

Ici, nous aurons bien notre message d’erreur qui s’affichera ! 

Plus... 

II existe bien sur les tests conditionnels, les boucles switch, les syntaxes 
alternatives pour les objets, etc. Nous verrons tous ces points particuliers 
au fur et a mesure de l’application, ce qui precede ne servant qu’a jeter les 
bases afm de pouvoir ensuite continuer a apprendre tout en commenfant 
a programmer. 
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Integration a XUL 

On peut directement integrer un script dans un document XUL de deux 
manieres : 

<wi ndow> 

<scri pt type="appl i cati on/x- javascri pt"> 

< ! [CDATA[ 

]]> 

</scri pt> 

</wi ndow> 


Dans ce cas de figure, le contenu du script sera directement lie au docu- 
ment XUL, ce qui est en general une pratique a eviter. 

L’attribut type indique le contenu de la balise script qui va suivre. II est 
possible de l’omettre. Le contenu du script est encadre entre les chaines 
< ! [CDATA[ et ]]>. Ces instructions speciales sont a destination du parseur 
XML et lui indiquent que le contenu qu’elles encadrent n’est pas du 
XML et, par consequent, qu’il ne doit pas etre analyse : le parseur ne 
doit pas y chercher des balises, simplement les representer en tant que 
donnees (« character data ») dans son arbre du document. Ceci evite des 
erreurs d’analyse pour les signes de comparaison comme > ou <, qui peu- 
vent etre interprets comme annonfant des balises XML, ou pour les 
signes comme &, qui annoncent une entite. 

Une autre maniere, plus elegante, consiste a simplement inclure un script 
depuis un fichier XUL, en utilisant l’attribut src de la balise scri pt. 

<wi ndow> 

<scri pt 

src="chrome://xui forum/content/javascript/identification, js" 
type="appl i cati on/x- javascri pt" /> 

</wi ndow> 

On retrouve les avantages habituels a cette solution : modularite, utilisa- 
tion d’URL chrome://, lisibilite, etc. Nous inclurons done cette ligne 
dans notre fichier xul forum. xul et nous allons commencer nos premieres 
lignes de JavaScript dans XUL Forum ! 

Dans ces fichiers JavaScript, nous retrouverons surtout des routines : ges- 
tions d’erreurs, manipulation de l’interface et gestionnaires d’evenements, 
capables de reagir aux actions de l’utilisateur. Les lecteurs familiers du 
HTML pourront ainsi utiliser des attributs comme 
onc1ick="maFonctionJS()" sur des elements XUL et creer la fonction 
correspondante dans le fichier JavaScript. 

www.frenchpdf.com 


- Premiere animation de I’interface avec 


Les Cahiers du programmeur 


Application directe a XUL Forum 


Attention Clarte des messages d'erreur 

Une pratique fort desagreable consiste a 
signaler a I'utilisateur toute erreur par un appel 
a la fonction alert(). Outre le fait que ceci 
devient rapidement agagant, I'utilisateur ne 
prete plus attention au contenu du message et 
se contente de diquer sur le bouton OK. 
N'abusez done pas de cette solution ! Nous 
allons au contraire utiliser la barre de statut 
pour afficher nos messages, discretement. 


Une premiere routine pour l’affichage d’erreurs 

Nous allons tout d’abord programmer des routines pour gerer les mes- 
sages d’erreur : une fonction ajouterErreurO pour ajouter un nouveau 
message d’erreur et une fonction afficherErreurO appelee a intervalles 
reguliers pour mettre a jour la barre de statut. 

Apres avoir ajoute la balise <script> a xul forum. xul, nous pouvons 
editer le fichier content/javascript/identification. js. II n’y a pas 
besoin de formatage special du fichier, nous pouvons ainsi directement 
ecrire : 

dump(" JavaScri pt lance !\n"); 

//ou plus voyant 

alert("Demarrage du lavaScrl pt") ; 


La premiere solution affichera le message sur la console tandis que la 
seconde ouvrira une boite de dialogue, contenant un point d’exclamation. 

Void le code concernant notre systeme de gestion d’erreurs. L’idee est de 
gerer un tableau global, une pile, contenant les messages d’erreurs. 
Chaque nouveau message d’erreur est ajoute en haut de la pile et la fonc- 
tion afficherErreurO, appelee a intervalles reguliers, prend l’element le 
plus en bas de la pile pour l’afficher. Ensuite (deux secondes plus tard par 
exemple), cette meme fonction prend le nouvel element le plus en bas de 
la pile et l’affiche a son tour. Ceci permet d’avoir un delai minimum entre 
deux messages d’erreur, pour laisser a I’utilisateur le temps de les lire. 


Astuce Oil trouver de I'aide sur le JavaScript dans Mozilla ? 

Autrefois, la reference etait DevEdge, le site de Netscape. On y 
trouvait des sidebars pour Mozilla, la reference JavaScript 1.5... 
Mais Netscape a ferme ce portail. Apres des tractations entre 
Mozilla et Netscape, la fondation Mozilla a recupere I'integralite 
du contenu. 

On retrouve done d'une part I'ancien miroir de DevEdge (amene, a 
terme, a disparaitre au profit du site developer.mozilla.org). On 
peut chercher sur ce site avec le moteur Google, en tapant parmi 
vos mots-des de recherche la chaine « site:devedge- 
temp.mozilla.org ». 

► http://devedge-temp.mozilla.org/index_en.html 


II y a d'autre part le serveur wiki de devmo (« developer 
mozilla »), oil se concentre le nouvel effort de documentation. On 
y retrouve notamment la reference JavaScript 1 .5. 

► http://developer-test.mozilla.org/en/docs/Main_Page 

► http://developer-test.mozilla.org/en/docs/ 
Core_JavaScript_1 .5_Reference 

Enfin, pour les personnes desireuses de suivre I'actualite du projet, 
e'est-a-dire les propositions, les evolutions et tout ce qui concerne 
les discussions entre developpeurs (pour Mozilla 2.0 par exemple), 
il y a le wiki de developpement. 

► http://wiki.mozilla.org/Main_Page 
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Outils Enregistrer les fichiers .js dans le bon encodage 

Les fichiers JavaScript ne sont pas des fichiers XML : Mozilla s'attend a avoir affaire a des 
fichiers encodes en 1 atf nl. Pensez a desactiver la sauvegarde en Unicode, sinon vous 
risquez d'avoir des symboles etranges dans votre barre de statut a la place des accents. 

Commande utile pour (g)vim : 

:set fifeencoding=fatinl 
:set encoding=fati nl 


/* tout ce quf concerne la gestion des erreurs sur la barre de statut */ 
var gErreurs = new Array; 0 
const DELAI = 2000; 0 

function ajouterErreur(pErreur) { 
var d = new Date(); 0 

gErreurs. push({erreur: pErreur, date: d}) ; 0 

} 

function affi cherErreurO { 
var e ; 

if ((e = gErreurs. shiftO) != null) { 0 

document .getElementById("xf-statusbar-status") .label = 
e . date . toLocal eTi meStri ng()+" : "+ e.erreur; 0 
} else { 

document. getElementById("xf-statusbar-status") .label = "Ok"; 0 

} 

setTimeout(afficherErreur, DELAI); 0 


setTimeout(afficherErreur, DELAI); 0 
ajouterErreur("JavaScript demarre") ; © 

Le fonctionnement de cet exemple est un peu complexe : il merite quel- 

ques explications. 

Q On declare d’abord le tableau global, qui servira de pile et qui con- 
tiendra les differents messages d’erreur. 

0 La constante DELAI contient l’intervalle de temps, en millisecondes, 
qui s’ecoulera entre deux mises a jour de la barre de statut. 

0 La fonction ajouterErreur est appelee a chaque nouvelle erreur (ou 
message de statut) a afficher. La premiere variable est utilisee pour 
Stocker l’heure a laquelle l’erreur se produit : c’est un objet Date. 

Q On ajoute un nouvel element au sommet du tableau, grace a la 
methode push(). Cet element que Ton ajoute est un objet, declare 
grace a la syntaxe entre accolades. Elle suit la regie suivante : 
{variablel: valeurl, variable2 : valeur2 ...}. Ici, on ajoute au 
sommet de la pile d’erreurs un objet ; sa variable membre appelee 
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erreur represente le message d’erreur et une autre variable membre 
date est un objet Date cree au moment oil l’erreur s’est produite. 

0 La fonction affi cherErreur sera appelee toutes les deux secondes 
(c’est le delai que nous avons choisi). On commence par voir si Ton a 
un element non nul au bas de la pile. La syntaxe est ici raccourcie : on 
aurait pu ecrire : 

var e = gErreurs . shi ft() ; if (e != null) {...} 

0 Si effectivement on a un message d’erreur en attente d’etre affiche, on 
recupere I’element portant l’ID xf-statusbar-status (I’element XUL 
<statusbarpanel i d="xf-statusbar-status" label="Bienvenue sur XUL 
Forum ! " f 1 ex="l" />) et on change sa propriete 1 abel . Le resultat est 
« 17:01:52 : JavaScript demarre », qui est affiche en bas de l’ecran. 

0 Dans le cas contraire, on affiche un message par defaut. 

0 On met un minuteur qui va de nouveau appeler notre fonction dans 
deux secondes. 

0 On amorce la fonction : il faut qu’elle soit appelee une fois pour pou- 
voir ensuite se rappeler elle-meme. 

© On affiche un premier message, indiquant que le JavaScript a com- 
mence son travail. 

Ainsi, nous pouvons afficher des messages d’erreur sur la barre de statut, 
tout en sachant qu’ils seront au moins separes par deux secondes, le 
temps pour l’utilisateur de les lire. 

Mais un nouveau probleme se pose, celui de la localisation. Dans nos 
fichiers XUL, nous avions utilise les DTD pour gerer les differentes lan- 
gues, mais dans JavaScript, ce concept n’est pas applicable. II existe un 
equivalent : les objets stringbundle. 


Culture Piles en programmation 

En programmation, le type de pile que nous avons utilise est appele pile FIFO : « first in, 
first out ». Le premier element arrive sortira en premier. Ce type de pile est frequemment 
utilise dans les communications avec un serveur distant lorsqu'il y a besoin de creer une 
file d’attente pour la transmission des messages. Nous retrouverons ce type de pile au 
chapitre 10 avec le proxy XPCOM pour les listeners LDAP. 

II existe un type de pile oppose : les piles LIFO (« last in first out ») ou « stack ». On empile 
tous les elements sur le dessus de la pile et ensuite, on sort I'element qui est en haut de 
la pile (avec par exemple en JavaScript la methode Array . popO). Ce type de pile est 
par exemple utilise lors d'une analyse lexicale : d'abord on ouvre les {, ensuite les (, 
ensuite les [, puis on depile I'element crochet lorsqu'on rencontre son oppose ] qui le 
ferme et ainsi de suite, toujours en prenant I'element le plus en haut de la pile. 
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Multilangue avec l’objet stringbundle 

La problematique est identique a celle que nous avions rencontree avec 
les fichiers XUL et la solution est a peu de choses pres la meme. 

II faut tout d’abord creer un fichier exterieur, contenant le nom des 
chaines et leur valeur, pour pouvoir exploiter le contenu de ce fichier 
avec JavaScript. Ce fichier sera bien sur place dans le dossier locale/ 
votre-1 ocal e/, pour pouvoir y acceder via l’URL chrome. 

Nous appellerons ce fichier js. properties (l’usage veut que ces fichiers 
portent l’extension properties) et nous le remplirons selon la syntaxe 
nomdelachai ne=contenu de cette chaine dans la locale choisie. 


Les chaines dans le fichier locale/fr-FR/js.properties 

statutOk=Ri en a signaler 
statutDemarre=Scri pt lance 

Pour les accents, il est indispensable de sauvegarder ce fichier en enco- 
dage UTF-8. En effet, nous allons l’inclure dans le document XUL. 

Le debut de xulforum.xul devient ainsi : 

L’element stringbundle qu’il faut placer dans xulforum.xul 

<window . . .> 

<stringbundle 

src="chrome ://xul forum/1 ocal e/js . properti es" i d="chai nes" /> 
<script type="text/javascri pt" 

src="chrome://xul forum/content/ javascript/identifi cation . js" /> 

II est important de placer lelement stringbundle avant lelement 
script. Ainsi, Mozilla chargera d’abord les chaines et ensuite, le script 
pourra y avoir acces. Enfin, nous allons pouvoir recuperer les chaines 
dans le fichier JavaScript. 


La reutilisation dans le fichier JavaScript content/javascript/identification.js 

var gStri ngBundl e = document . getEl ementById("chai nes") ; 

if (...) {} else { 

document. getElementById("xf-statusbar-status") .label = 
gStri ngBundl e .getStri ng("statutOk") ; 

} 
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OuilLS Reference DOM et JS 

II existe un site referengant les methodes et pro- 
prietes des objets du DOM, ainsi que quelques 
objets JavaScript. Peut-etre sera-t-il plus clair pour 
vous que le site xulplanet.com ! 

> Http://www. mozref.com 


C’est ici que Ton realise toute l’utilite de placer un attribut i d sur les ele- 
ments XUL. La variable globale document est une instance de l’objet 
Document et represente le document HTML, ou XUL, qui appelle le 
script. D’autres instances de cet objet peuvent servir a manipuler des 
documents XML generiques par exemple. 

Et ainsi, avec le DOM, on peut utiliser la methode getElementByld de 
l’objet Document pour avoir acces a un element du document et ce grace a 
son identifiant. Cette methode est utilisee deux fois, la premiere pour 
declarer une variable globale qui represente lelement <stri ngbundl e> , la 
seconde pour avoir acces a l’element de la barre de statut contenant les 
textes. 

Comme vous l’aurez devine, la methode de l’element StringBundle per- 
mettant d’obtenir une chaine a partir de son nom est getStri ngQ. 


Plus de manipulation DOM : options avancees a la 
connexion 

Nous pouvons maintenant voir quelques fonctions du DOM pour 
cacher ou montrer une deuxieme serie d’options relatives a la connexion. 

Nous allons ajouter un nouveau tableau sur notre page d’identification, 
qui contiendra des options avancees (nous verrons leur signification au 
fur et a mesure de notre progression dans JavaScript). 


Le tableau d’options avancees que nous ajoutons a xulforum.xul 

<grid style=" visibility: hidden;" i d="xf-gri d-opt"> 

<col umns> 

<column i d="xf-i dent-opt-textes" /> 

<column i d="xf-i dent-opt-champs" /> 

</col umns> 

<rows> 

<row> 

<description val ue="Votre DN exact" /> 

<textbox i d="xf-i dent-opt-dn" /> 

</ row> 

<row> 

<descri pti on value="URL du fichier de configuration" /> 
ctextbox i d="xf-i dent-opt-conf i g" 

val ue=" http : //www . xul forum . com/ conf i g . xml " /> 

</ row> 

<row> 

<description val ue="Ignorer 1 ’identification LDAP" /> 
ccheckbox id="xf-ident-opt-ignorer" /> 

</ row> 

</ rows> 

</gri d> 
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Si vous ajoutez ce code dans votre fichier xul forum . xul a la suite du pre- 
cedent element <grid>, vous remarquerez que l’espace occupe par l’ele- 
ment est alloue. C’est-a-dire que tout se passe comme si Gecko plafait 
d’abord tous les elements, les dessinait tous et gommait ensuite le grid 
qui nous interesse sans pour autant diminuer la hauteur du groupbox. 

Ceci est parfaitement normal puisque Ton demande juste a Gecko de ne 
pas afficher notre grid. On ne lui demande pas de le supprimer, ni de ne 
pas le prendre en compte dans la repartition des elements ! 

Pour remedier a ceci, nous allons utiliser une astuce : nous allons placer 
notre element grid en has de la page, juste avant la barre de statut, de 
maniere a ce qu’il ne bouscule pas l’organisation du cadre central. 

Ensuite, notre JavaScript changera son emplacement et l’affichera. 

Ainsi, il n’y aura pas de probleme d’element fantome occupant pourtant 
de l’espace. 

Nous ajoutons aussi un element dans le cadre central, une case a cocher 
permettant de montrer les options. 


Une nouvelle ligne avec une case a cocher pour afficher les options avancees 


crow i d="xf-row-opti ons"> 

cdescription va1ue="Voir les options avancees" /> 
ccheckbox i d="xf-i dent-opt" 

oncommand="montrerOpti ons() /> 

</ row> 

</ rows> 

</grid> 

chbox id="xf-config-hbox"> 


Vous remarquerez que cette ligne a un attribut id, de meme que la boite 
horizontale plus bas (celle qui contient le bouton OK). 

Nous avons place sur l’element checkbox un attribut oncommand. II 
permet de specifier un gestionnaire d’evenement, c’est-a-dire la fonction 
qui est appelee quand l’evenement command a lieu. Cet evenement n’est 
pas present dans le DOM habituel dune page web (qui utilise plutot 
onclick, ondoublecl i ck, etc.) : c’est un evenement special, qui englobe a 
la fois le clic (on coche la case en cliquant dessus) et les validations cla- 
vier (on peut aussi la cocher avec la barre d’espace). 

Les fonctions JavaScript qui reagissent aux evenements utilisateurs sont 
appelees des fonctions de callback. 
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Le code servant a montrer les options avancees 

La fonction JavaScript montrerOptionsO va done devoir effectuer les 
taches suivantes : 

• recuperer le tableau contenant les options avancees ; 

• le placer avant l’element hbox contenant le bouton OK ; 

• le rendre visible ; 

• cacher la ligne contenant la case a cocher (une fois que Ton a affiche 
les options, ce ne sera pas la peine de les cacher de nouveau). 

function montrerOptionsO { 

dump("Affi chage des options avancees\n") ;0 

var o = document. getElementById("xf-grid-opt") ; 0 

var g = document. getE1ementById("xf-config-groupbox") ; 0 

o. style. visibility = "visible"; 0 

g . insertBefore(o , 

document .getElementById("xf-config-hbox")) ; 0 
g.chi1dNodes[l] .chi1dNodes[l] . removeChil d( 

document. getE1ementById("xf-row-options")) ; 0 
document . getEI ementById( 

"xf-ident-i dent_nom") . setAttribute("di sabl ed" , true); 0 


Culture dom 

Toutes les methodes agissant sur des conte- 
neurs sont en fait des methodes de I'objet DOM 
Node. « Node » signifie « noeud » et I'on peut 
voir tous les elements XUL comme des noeuds. 
Un element Description est un noeud qui 
contient un ultime noeud special, appele 
CharacterData, dont la propriete data 
represente son texte. 

En fait, on peut voir la logique DOM comme une 
hierarchie organisee comme un arbre avec des 
noeuds, arbre qu'il est possible de modifier 
dynamiquement en agissant sur ses noeuds. 

► http://www.w3.org/DOM/ 


La premiere chose a faire, apres l’affichage 0 d’un petit message de 
debogage, est de recuperer les deux principaux elements que nous 
manipulerons : o pour le tableau des options 0 et g pour le groupbox 
global 0 . 

On rend le tableau des options visible Q et on l’insere comme enfant du 
groupbox 0 . On aurait pu utiliser la methode appendChild sans second 
argument, mais le tableau des options serait apparu en dessous du 
bouton OK, car cette methode ajoute l’element en dernier. Ce n’est pas 
tres elegant, e’est pourquoi on l’insere avant la boite horizontale conte- 
nant le bouton OK, via la methode i nsertBefore(). Vous remarquerez 
qu’il est necessaire de recuperer l’element parent pour pouvoir ensuite 
agir sur ses elements enfants : e’est la logique DOM. 

Puis on supprime purement et simplement l’element row contenant la case 
a cocher 0 . Ici on montre l’utilisation du tableau chi 1 dNodes. Numerate a 
partir de 0, il contient tous les elements fils. 

• Ici, g est le groupbox. g . fi rstChi Id, est egal a g.childNodes[0] et 
represente l’element caption, le titre du groupbox. 

• g . chi 1 dNodes [1] represente le grid contenant les options classiques. 

• g . chi 1 dNodes [1] . chi 1 dNodes [0] represente l’element <co1umns> du 
gri d. 
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• g . chi ldNodes [1] . chi 1 dNodes [1] est l’element <rows>, parent de l’ele- 
ment que Ton veut supprimer. Ici on appelle la methode 
removeChi 1d() avec l’objet a supprimer obtenu grace a son identifiant. 

Enfm, on desactive le champ nom Q puisqu’il est abandonne au profit du 
DN exact (DN pour Distinguished Name, l’identifiant precis de l’utili- 
sateur aupres du serveur LDAP). 


Identification 

Votre nom : 

Votre mot de passe : | | 

Votre DN exact | o=xulf orum ,ou=utilisateurs| 

URL du fichier de configuration | ilhost/~jonathan/params .xr| 

Ignorer I'identification aupres du serveur LDAP Q 

I OK I 

Figure 7-1 

Les options avancees affichees 


En conclusion, ce bref apenpi du DOM nous permet de montrer 
quelques-unes de ses possibility essentielles. Nous allons en voir quel- 
ques autres en recuperant un fichier de configuration situe sur un serveur 
distant, au format XML. Le DOM va nous permettre de manipuler ce 
fichier XML pour en extraire les informations necessaires. 


Attention Cache des fichiers XUL 

Avec certaines versions de Firefox, si vous montrez les options avancees, que vous diquez 
sur OK (pour aller sur la page suivante) puis que vous revenez a I'identification, le tableau 
des options avancees est de nouveau visible ! Ceci est du a une mise en cache de la page 
(I'utilisateur final n'aura pas desactive le cache XUL !). Pour eviter ceci, mettez dans votre 
fichier XUL: 

<window ... onl oad="f nf tf al i satf on() ; " ...> 

Puis dans la fonction i nf tf al i satf on(), dans le fichier JavaScript : 
functfon f nf tfalf satfon () { 

document. getElementById("xf-grf d-opt") . styl e . vf sf bf 1 f ty = 
"hf dden" ; 

} 
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► http://openweb.eu.org/articles/ 
objet_xmlhttprequest/ 


> http://www.xulplanet.com/references/ 
objref/XMLHttpRequest.html# 
method_open 
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Communication avec I’exterieur : 
recuperation d’un fichier de configuration 

L’objet XMLHttpRequest 

Nous allons preparer des fichiers de configuration predefinis, un pour 
chaque forum. En fait, comme notre extension est incluse dans Mozilla, 
elle doit pouvoir se connecter a des forums differents, sur differents ser- 
veurs. Un fichier de configuration contiendra done les informations 
necessaires pour se connecter au serveur qu’il decrit : hote, chemin vers 
le fichier pour les services web, port, etc. Chaque serveur proposant un 
support de XUL Forum pourra done fournir son fichier. 


Alternative ActiveX et Internet Explorer 

L'objet XMLHttpRequest a d'abord ete invente par Microsoft, qui le propose sous 
forme de controle ActiveX pour son navigateur Internet Explorer. II est ainsi possible d'uti- 
liser AJAX (presente en tant qu'alternative au debut du livre) pour les deux navigateurs, 
Mozilla et Internet Explorer. Les inconvenients de cette methode ont deja ete mentionnes 
et nous ne nous attarderons pas dessus : incompatibilite entre les differents navigateurs, 
code JavaScript peu « propre », HTML peu adapte a la manipulation d'interfaces graphi- 
ques, etc. 


Pour recuperer un fichier distant, nous allons utiliser l’objet 
XMLHttpRequest. Son utilisation a ete mise en relief avec le service d’e- 
mails Gmail de Google, qui se distingue par son aspect tres dynamique : 
les pages changent au fur et a mesure de la navigation, sans impression 
de rechargement ; le code JavaScript recupere les donnees necessaires sur 
le serveur grace a cet objet XMLHttpRequest et construit ensuite dynami- 
quement l’interface grace a DOM. 


Le fichier XML contenant les informations de configuration 

<?xml version="1.0" encodf ng="utf-8" ?> 

<confi g> 

<serveur type="ldap"> 

<hote>192 . 168 . 0 . 5</hote> 

<baseDn>o=xul forum , ou=uti 1 i sateu rs</baseDn> 
</serveur> 

<serveur type="php"> 

<hote>l ocal host</hote> 

<chemi n>/~jonathan/xul forum . php</chemf n> 
</serveur> 

</conff g> 
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Le fichier XML est tres simple. On place un element racine appele 
config, puis on definit deux serveurs, avec chacun leurs propres 
caracteristiques. Nous pourrons parcourir la liste des elements serveur, 
voir pour chacun leur type et, en fonction du type de serveur decrit dans 
le fichier de configuration, en extraire les informations qui nous interes- 
sent. 


Recuperation de ce fichier XML avec JavaScript 

function chargerParametresO { < 

try { 

var x = new XMLHttpRequest ; 

x. open ("GET" , < 

"http ://l ocal host/~jonathan/params . xml " , fal se) ; 

x.send(null) ; < 

if (x. status ! = 200) { < 

throw new Error("HTTP "+x. status); 

} 

} catch (e) { < 

ajouterErreur( 


"Impossible d’obtenir le fichier de configuration ! ") ; 
ajouterErreur(e) ; 
dump(e) ; 

} 

var config = x . responseXML ; < 

if (config == null) { 

ajouterErreur("Impossi ble de lire le fichier XML"); 
return ; 


II faut d’abord initialiser I’objet 
XMLHttpRequest. 


On demande a ouvrir, par la methode GET (la 
methode dassique pour acceder a un document via 
HTTP, par opposition a POST pour envoyer un for- 
mulaire par exemple), le fichier de configuration. 

On envoie la requete. 

Si le code de statut HTTP envoye par le serveur est 
different de 200 ( HTTP OK), on arrete. Quelques 
codes d'erreur sont tres connus : 404 « File not 
found », 500 « Internal Server Error »... 

On prend en charge les erreurs, avec un bloc 
catch. On attrape ainsi les erreurs engendrees 
par XMLHttpRequest (impossible de se con- 
necter au serveur) et les erreurs lancees avec 
notre throw. 


On verifie que le document XML n’est pas vide. 




gConfig = new confi gServeur ; 
gConfig.xml = x; 


if (gConfig. ldap.hote == null) 

document .getElementById("xf-ident-opt-ignorer") . 

** setAttri bute("checked" , true); 

el se 

document .getElementById("xf-ident-opt-ignorer") . 

** setAttri bute("checked" , false); 

document . get El ementById("xf-i dent-opt-dn") . 

v* setAttri bute("val ue" , gConfig. ldap. baseDn) ; 

} 


< On I'assigne a la variable gConfig que nous 
allons traiter plus tard. 

< On pre-remplit quelques valeurs, comme la case 
servant a ignorer I'identification LDAP. 


< On pre-remplit aussi le champ DN de base. 


Quelques petits details sont a remarquer dans ce code. 

• L’URL vers le fichier de configuration pourra etre remplacee plus 
tard par document. getElementById("xf-ident-opt-config") .value. 
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• Le troisieme argument de la methode open indique que la requete ne 
dois pas etre mise en arriere-plan (le parametre async vaut false). 

• On n’envoie pas de donnees a la ligne suivante, via send. Si la 
methode avait ete POST, on aurait eu une valeur non nulle. 


Alternative Requete asynchrone 

II est possible de lancer la requete en arriere-plan. Ainsi, le traitement des informations 
n'est pas bloque, I'affichage ne donne pas I'impression de se « geler » si le fichier met du 
temps a arriver (du fait de la taille importante du fichier ou d’une congestion reseau). On 
pourra ensuite reagir a I'arrivee du fichier XML. 

Cependant, cette methode n'est pas detaillee ici. Elle impose I'introduction des notions 
d'interfaces implementees en JavaScript, ce qui rajouterait une complexite a un chapitre 
deja dense. De plus, les fichiers sont generalement courts, ce qui limite les risques de gel 
de I'interface. Enfin, nous verrons les requetes asynchrones avec LDAP au chapitre 10. 
Ilya quelques details sur le mode async sur le wiki du site xulfr, ainsi qu'un tres interes- 
sant exemple pour envoyer un fichier par la methode POST (a lire apres avoir bien integre 
les composants XPCOM en JavaScript). 

► http://xulfr.org/wiki/ApplisWeb/Request 


On mentionne aussi une variable globale gConfi g. C’est en fait un objet, 
declare de la maniere suivante : 


La variable gConfig qui stockera toutes nos informations de configuration 

function configServeurO { 

this.php = { hote: null, chemin: null}; 
this.ldap = { hote: null, baseDn: null}; 
thi s .xml = nul 1 ; 
thi s . toStri ng = function () { 

return "Configuration globale :\n"+ 

"\tPHP :\n"+ 

"\t\tHote "+thi s . php . hote+" :: Chemin "+ 
this.php. chemi n+"\n"+"\tLDAP :\n"+ 

"\t\tHote "+this.ldap.hote+" :: BaseDN "+ 
this. ldap. baseDn+"\n" ; 

} 

} 

var gConfig; 

/* declaree ici pour pouvoi r etre globale = accessible depuis 
une fonction. La ligne gConfig = new configServeur est ainsi 
placee dans la fonction chargerParametres */ 

La variable gConfi g est un objet qui est cree grace a sa fonction construc- 
ted configServeur. Ses variables membres php et ldap sont des objets, 
avec elles-memes des variables membres servant a Stocker les informa- 
tions sur les serveurs PHP et LDAP. La variable xml contient l’objet 
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Document cree lors de l’analyse du fichier XML par XMLHttpRequest. Elle 
pourra servir pour des traitements ulterieurs. 

La fonction toString est quant a elle une fonction un peu particuliere. 

Normalement, chaque instance de la classe Object possede une fonction 
toString par defaut, qui renvoie une valeur du type [object Object]. 

C’est cette fonction qui est appelee quand on a besoin de representer un 
objet sous sa forme de chaine. Les objets Number ont leur propre fonction 
toString pour convertir un nombre en chaine ; de meme, les tableaux, 
instances de l’objet Array, sont automatiquement convertis en leur suite 
de valeurs separees par des virgules lorsqu’on a besoin de les representer 
sous forme de chaine ; enfin, les erreurs renvoient Error : suivi du mes- 
sage d’erreur. 

Comme notre objet n’appartient a aucune classe particuliere, il possede 
une fonction par defaut qui ne sait bien sur pas le representer litterale- 
ment. C’est ici que nous intervenons : nous fournissons notre propre 
fonction toString pour offrir une representation litterale convenable de 
notre objet gConfig. Bien sur, cela ne sert qu’a des fins de debogage, mais 
ceci peut etre particulierement utile pour identifier la cause d’un pro- 
bleme en cas d’erreur persistante. 


Alternatives Utilisation de la propriety prototype 

La methode presentee ci-contre pour instancier un 
objet peut presenter des inconvenients. Si par 
exemple on avait a instancier plusieurs objets 
configServeur, il faudrait, pour chaque objet, 
allouer de la memoire correspondant aux fonctions. II 
y aurait ainsi plusieurs emplacements memoire conte- 
nant chacun le code de la fonction toString. Cet 
inconvenient peut etre evite en utilisant la syntaxe 
suivante : 

function configServeur() { 

this.php = { hote: null, chemin: null}; 
this.idap = { hote: null, baseDn: null}; 
this.xmi = null ; 

} 

configServeur. prototype .toString = 
function () { 

return "Configuration globale :\n"+ 

"\tPHP :\n"+ 

"\t\tHote "+this.php.hote+ 

" :: Chemin "+this.php.chemin+"\n"+ 
"\tLDAP :\n"+ 


"\t\tHote "+this.ldap.hote+ 

" :: BaseDN "+this.ldap.baseDn+"\n"; 

}; 

Ainsi, pour tous les nouveaux objets configServeur, 
la variable membre sera juste une reference vers une 
fonction toString definie ailleurs dans le code. Ceci 
evite de definir deux fois une fonction, en particulier 
pour du code plus lourd faisant appel a des compo- 
sants XPCOM. 

Declarer directement I'objet 

Dans I'esprit inverse de ce qui precede, on aurait pu 
dire que, comme on n'utilise qu'une fois I'objet 
gConfig, il n'est pas necessaire de creer un 
constructeur : il vaut mieux instancier la variable 
directement. On aurait ainsi pu ecrire : 

var gConfig = { php : ..., Idap : ..., 
toString : function () { ... } }; 

A vous de retenir la syntaxe qui vous plait le plus ! 
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Les bases sont posees et nous allons enfin pouvoir agir concretement : 
remplir les variables gConfig.php.hote, gConfig.ldap.baseDn, etc., avec 
les valeurs qui leur correspondent. DOM va done de nouveau etre mis a 
contribution, pour parcourir le fichier XML et en extraire les informations 
qui nous interessent ; nous remplirons ainsi notre objet de configuration. 


[.’analyse avec DOM 

De meme que, lorsque nous montrons les options avancees, nous mani- 
pulons une instance globale de l’objet Document (appelee 
window. document ou en raccourci document), nous allons manipuler une 
autre instance de cet objet Document, qui est var config=x. responseXML. 


Alternative Autre syntaxe 

gConf i g . T dap . baseDn 
gConfig["1dap"] ["baseDn"] 

Les syntaxes ci-dessus sont toutes deux equi- 
valentes. On peut preferer la seconde pour 
remplir dynamiquement un objet (par 
exemple : 

gConf i g [s .getAttri bute("type")] 


Extraction des informations du fichier XML en JS 

var serveurs = config.getElementsByTagName("serveur") ; 
for (var i = 0; i < serveurs. length; i++) { 
var s = serveurs[i]; 

switch (s .getAttribute("type")) { 
case "php" : 

gConfig.php.hote = 

s .getElementsByTagName("hote") [0] .fi rstChild.data; 
gConfig . php. chemi n = 

s.getElementsByTagName("chemin") [0] . f i rstChild.data; 
break ; 

case "1 dap" : 

gConf ig.l dap. hote = 

s .getElementsByTagName("hote") [0] .fi rstChild.data; 
gConfig.ldap.baseDn = 

s .getElementsByTagName("baseDn") [0] . f i rstChild.data; 
break ; 

} 

} 

dump(gConfi g) ; 


II faut d’abord recuperer un objet contenant les differents elements ser- 
veur, en l’occurrence un objet HTMLCol 1 ecti on (un dump sur cet objet ren- 
voie Object HTMLCollection). Comme il ne possede pas que les proprietes 
0, 1... pour les differents elements serveur, mais d’autres proprietes 
comme length (le nombre d’elements), nous utilisons une boucle for. 
Nous initialisons une variable i (traditionnellement un compteur) et tant 
qu’elle est inferieure au nombre d’elements serveur (qui vaut 2), nous 
l’augmentons de un. 

A chaque element serveur, represente par une variable secondaire s (pour 
eviter les longues recritures), on choisit les actions a effectuer en fonction 
de l’attribut type du tag serveur. Si e’est un serveur PHP, on recupere 
tous les elements hote du serveur, on prend celui d’indice 0, puis son 
premier element (qui est un objet Text) et enfm sa valeur avec data. 


www.frenchpdf.com 


o. 

u 

to 

C3 

> 

i 

Alternative EcmaScript For XML : e4X 

► https://bugzilla.mozilla.org/show_bug.cgi?id=293392 

A I'heure de I'ecriture de ce chapitre, la fonctionnalite n'etait pas disponible. Mais pour 
des versions de Mozilla datees du 5 juillet 2005 (et posterieures), il est possible d'utiliser 
une nouveaute du langage JavaScript : ECMAScript for XML ou e4X en abtege. 
e4X est une extension a JavaScript (standardise elle aussi par I'ECMA), qui permet de 
definir un nouveau type natif : XML. On pourra ainsi ecrire : 

var monxmJ = <montag>type natif !</montag>; 

Plus d'informations sur e4x sont disponibles sur le lien ci-dessous. Nous n'utiliserons pas 
cette technique dans XUL Forum pour de simples raisons de compatibilite descendante ! 

► http://weblog.infoworld.eom/udell/2004/09/29.html#a1085 


On pourrait detailler tout ceci de la maniere suivante : 

var hotes = s . get El ementsByTagName("hote") ; 

// il peut y en avoir plusieurs et e’est la seule methode 

// pour recuperer des elements selon leur tag 

var premierHote = hotes [0]; 

var noeudTexte = premierHote.fi rstChild; 

var valeurHote = noeudTexte. data; 

Cependant, tout cela peut etre condense en une ligne, pour gagner en 
efficacite au niveau du DOM. Nous procedons de meme pour les autres 
attributs des serveurs PHP et LDAP. 

Pour conserver l’URL du fichier de configuration entre les pages 
xul forum . xul et i ndex . xul , nous utilisons une astuce tres simple. Lorsqu’on 
clique sur le bouton OK, l’utilisateur est envoye non pas vers la page 
i ndex . xul , mais vers la page i ndex . xul ?conf i g=http : / /www . exampl e . com/ 
fi chierdeconf .xml . 


Attention firstChild trompeur 

On pourrait etre tente d'utiliser la syntaxe 
s . f i rstChi ld.fi rstChi 1 d . data. 

Mais ce serait une erreur car s . fi rstChi 1 d 
est en fait un noeud Text contenant le saut de 
ligne et les tabulations comprises entre la fer- 
meture du premier tag serveur et I'ouverture 
du tag host. 

De toute fagrn, la methode que nous utilisons 
permet de se fonder uniquement sur les noms des 
tags et pas sur leur ordre dans le fichier XML. Si 
I'on avait utilise s . f i rstChi 1 d, au moindre 
changement, par exemple, I'inversion des tags 
baseDn et host, il aurait fallu mettre a jour le 
code, ce qui est bien sur une faute de gout I 


//dans xulforum.xul 

var url = "chrome://xulforum/content/index.xul?config="+gConfig.url ; 
document . location . href = url; 

//puis dans index. xul 

var 1 = document . location . href ; 

var c = 1 . substr(l . i ndexOf ("?confi g=")+8) ; 

//c contient maintenant l’url du fichier de configuration 


Tout ceci nous donne de bonnes bases en JavaScript. Dans les chapitres 
suivants, nous aurons tous les elements prets pour passer a quelque chose 
de plus concret : identification directe au serveur LDAP ou utilisation 
des services web. 

Une seule ombre persiste cependant au tableau : toutes les fonctions, 
tous les objets sont concentres dans un seul et unique fichier ! Nous 
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Attention 

Fonctions a lancer au chargement 

Si vous placez chargerParametres () au 
beau milieu de votre JavaScript, vous obtien- 
drez des erreurs. L'objet 
document .getElementById( 
"un-objet-qui -exi ste") 
n'aura pas de proprietes. En effet, comme la 
balise script est placee au tout debut du 
fichier XUL, les instructions placees directe- 
ment dans le JavaScript (et non pas dans une 
fonction separee) sont executees avant que 
tous les elements ne soient charges. Le premier 
appel a chargerParametresO doit se 
trouver dans la fonction i ni ti aJ i sati on () 
vue page 1 1 3. Ainsi, elle sera appelee apres le 
chargement complet du fichier XUL. 


Astuce Rechargement d'un fichier de configuration 

Maintenant que notre fonction chargerParametres est prete, nous 
pouvons proposer le chargement d'un fichier de configuration 
alternatif ! 

II suffit de placer le code suivant dans le fichier XUL : 

<row> 

<hbox> 

<description value="&ident.ident_opt_config;" /> 

<button fabef="Recharger" oncommand="chargerParametres() " /> 
</hbox> 

ctextbox id="xf-ident-opt-config" 

vaf ue="http : //I ocaf host/~j onat han/pa rams . xmf " /> 

</row> 

Ainsi, comme la fonction chargerParametres recupere la valeur du 
champ contenant I'URL du fichier de configuration, apres avoir mis a 
jour ce champ, I'utilisateur n'aura plus qu'a cliquer sur Recharger pour 
prendre en compte les nouveaux parametres (comme le DN de base). 


pourrions separer le tout en plusieurs fichiers et les inclure avec chacun 
une balise script, mais nous allons faire mieux que cela. 


Approche des composants XPCOM : 
fonction includeO 

Si vous avez l’experience d’autres langages, vous avez certainement deja 
utilise du code comme #fnclude <headers_dans_autre_fi chi er.h> ou 
include (". . /include/ rout ines.inc.php"). 

JavaScript ne propose pas ce mecanisme par defaut, mais il existe un 
composant XPCOM qui propose une fonction equivalente. Les compo- 
sants XPCOM sont ecrits en C++ et, grace a des fichiers IDL (Interface 
Definition Language), ils proposent, entre autres langages, un acces a 
JavaScript. Nous avons deja aborde la place d’XPCOM au sein du 
XPFE dans le chapitre d’introduction. 

Les composants XPCOM 

Concretement, comme ce mecanisme fonctionne-t-il en JavaScript ? II 
faut d’abord obtenir une instance d’un composant. C’est-a-dire que, 
parmi tous les composants disponibles, on en choisit un en particulier et 
on l’initialise : une variable est creee, qui contient une instance de ce 
composant. Mais cela ne suffit pas pour utiliser le composant directe- 
ment. Un composant implemente plusieurs interfaces, decrites dans des 
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fichiers IDL. Nous devons demander a l’instance du composant de nous 
fournir une interface, afin que nous puissions communiquer avec lui. 

En resume, il faut : 

• d’abord creer une instance du composant ; 

• ensuite, lui demander une interface via laquelle communiquer avec lui ; 

• on peut alors utiliser les methodes et les proprietes fournies par 
l’interface sur ce composant. 

II existe ainsi un composant permettant de gerer un telechargement. II 
implemente trois interfaces. La premiere est standard et est implementee 
par tout composant XPCOM. La seconde concerne le telechargement en 
lui-meme et donne acces a l’heure de debut, a la source, au fichier de des- 
tination, etc. La troisieme est plus specifique a la progression : elle permet 
de lier le telechargement a d’autres fonctions chargees de mettre a jour 
l’interface. Cette troisieme interface est elle aussi implementee par d’autres 
composants : envoi d’un e-mail, impression... 

Notre inclusion 

II suffit maintenant de placer toutes les routines generates, comme la 
gestion des erreurs, dans le fichier content/javascript/global . js. Pour 
l’inclure, on ecrira dans le fichier identification, js : 


Inclusion dans identification's 

var jComposant = Components. classes! 

"@mozi 1 1 a. org/moz/jssubscri pt- loader ; 1"] . createlnstanceO ; 
var jlnterface = jComposant .Querylnterface( 

Components . i n ter faces . mozIJSSubScri pt Loader) ; 
jlnterface . 1 oadSubScri pt ( 

"chrome ://xu1 forum/content/javascri pt/gl obal . js") ; 

Nous pourrons recopier ces trois lignes dans le futur forum, js, qui con- 
tiendra le JavaScript correspondant au fichier index. xul. Le mecanisme 
d’inclusion pourra etre repris pour differentes pages, chacune necessitant 
des inclusions differentes (la page index. xul aura besoin des routines 
concernant les services web et la page xul forum. xul des routines 
LDAP), et aussi pour inclure differents fichiers. Ainsi on ajoutera plus 
tard : 

jlnterface . 1 oadSubScri pt ( 

"chrome ://xul forum/content/javascri pt/ldap. js") ; 
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B.A.-BA Contract ID 

Les composants XPCOM sont identifies par une chaine de caracteres commen^ant par 
C'est I'identifiant unique qui caracterise un composant XPCOM. II est appele « Contract 
ID » et doit etre lisible par un humain. II se compose des elements suivants : 

• le domaine du composant : mozilla.org pour les composants livres d'office, 
xulforum.org si nous enregistrons nos propres composants, etc. ; 

• le module : il peut s'agir de network, 1 dap, gfx, core, etc. ; 

• le composant : nous en verrons de nombreux dans la suite de ce livre ; dans ce cas 
precis, le composant est jssubscript-loader ; 

• la version du composant. 

Les trois premiers elements sont separes par des barres obliques (slash) ; le dernier est 
separe du reste par un point-virgule. 


Les fonctions se rapportant a la configuration de XUL Forum seront 
placees dans un fichier separe config. js, tandis que les routines de ges- 
tion d’erreurs le seront dans global . js. Le deplacement des fonctions 
est transparent avec cette methode d’inclusion. 

Comme explique precedemment, la premiere ligne cree une instance du 
composant : on accede a l’objet global Components, a son membre 
classes, puis au membre @mozilla.org/moz/jssubscript-loader;l 
(remarquez l’utilisation de la syntaxe avec guillemets, obligatoire pour ne 
pas causer d’erreurs avec les caracteres speciaux), puis a sa methode 
createlnstance(). 

Ensuite, on demande a acceder a l’interface mosIJSSubscriptLoader. 
Une fois que Ton a recupere cette interface, on s’en sert pour utiliser les 
methodes du composant, en l’occurrence la methode loadSubScript, 
avec pour chemin une URL chrome://. 


Le composant 

► http://www.xulplanet.com/references/xpcomref/comps/ 
cjmozjssubscriptloaderl .html 

L'interface 

► http://www.xulplanet.com/references/xpcomref/ifaces/ 
mozlJSSubScriptLoader.html 


Nous aurons l’occasion de revenir largement sur les composants 
XPCOM dans les chapitres suivants sur JavaScript, ceci n’est qu’un bref 
aperipi de la logique de composants. 
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Culture NSPR et JavaScript 

Si vous etudiez de pres I'interface, vous remarquerez que les entiers ne sont pas de type 
i nt mais PRUi nt32. PR signifie ici « Portable Runtime », un signe de la couche d'abs- 
traction NSPR (Netscape Portable Runtime) qui sous-tend tout ('architecture XPCOM et 
qui garantit que le type de donnees PRUint32 aura la meme taille sur toutes les plates- 
formes. 


En resume... 

Beaucoup d’avancees concretes ont ete effectuees avec ce chapitre : 

• Tout d’abord, I’interface n’est plus statique : du JavaScript est desor- 
mais lie a notre fichier xul forum . xul et permet d’effectuer de maniere 
dynamique des modifications dans I’interface (par exemple, montrer 
les options avancees), grace au DOM. 

• Les erreurs ont leur propre mecanisme d’affichage, dans la barre de 
statut, comme toute application qui se respecte. 

• L’internationalisation n’a pas ete oubliee : le JavaScript est lui aussi 
multi-langue ! 

• La communication avec l’exterieur a ete vue dans un sens : du serveur 
vers le client, pour rapatrier un fichier de configuration XML, mani- 
pule grace au DOM, rapatrie grace au fameux XMLHttpRequest. 

• Un mecanisme d’inclusion de fichiers JavaScript nous a permis 
d’effectuer une premiere approche des composants XPCOM de 
Mozilla. 

Tout cela est tres dense, c’est pourquoi un chapitre sur RDF remplira le 
role d’intermede : en creant des fichiers XML avec PHP, nous allons 
exposer le contenu de la base de donnees contenant les messages et, en 
utilisant un mecanisme de modeles ( templates en anglais) au sein de 
XUL, nous allons creer automatiquement du contenu. 
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Automatisation avec RDF 


Pour remplir notre interface, nous pourrions utiliser JavaScript, 
nous connecter au serveur distant, recuperer des donnees, les 
analyser, utiliser DOM, remplir l’interface, etc. Mais quelle 
complexity ! Alors qu’avec RDF, tout est automatique... 


SOMMAIRE 

► Preliminaires : format RDF, 
DOM cote PHP 

► Une approche lineaire, 
qui devient recursive 

► Plus de controle sur RDF 
avec XPCOM 

MOTS-CLES 

► Templates 

► Service RDF XPCOM 

► RDF/XML 
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Nous allons maintenant introduire un nouveau standard, au coeur de la 
plate-forme Mozilla : RDF. Les concepts fondamentaux vus lors du cha- 
pitre de presentation du XPFE vont etre approfondis. Nous utiliserons 
dans ce chapitre deux methodes : l’une avec JavaScript et l’autre sans. 


Le format RDF : explications detaillees 


Alternative Utilisation d'autres 
methodes de serialisation 

II existe aussi d'autres langages comme N- 
Triples permettant de modeliser un schema RDF. 
Cependant, seul RDF/XML est implements au 
sein de Mozilla, c'est done cette solution que 
nous retiendrons. D'autant plus que XML 
devient maintenant familier. Un derive supple- 
mentaire ne devrait pas etre trap difficile a 
integrer I 


Les noeuds et les arcs 

RDF signifie Resource Description Framework. C’est au depart un format 
graphique : il represente les donnees sous forme de schema structurel. 
Mais on ne peut pas inclure des schemas dans un langage de 
programmation ! II existe done des formats pour serialiser (representer 
sous forme de texte) les schemas RDF : c’est le role du format RDF/ 
XML. 

Le plus souvent, lorsqu’on parle d’un fichier RDF, par abus de langage 
on designe un fichier RDF/XML. 

Dans un graphe RDF, il y a des noeuds et des arcs. Les noeuds vont 
representer des entites, comme le livre A la recherche du temps perdu , 
comme un lecteur de ce livre, ou encore comme son auteur... 

Les arcs vont relier les noeuds entre eux. Par exemple l’arc « auteur » relie 
le noeud « A la recherche du temps perdu » a un autre noeud « Marcel 
Proust ». Un autre arc « date de parution » peut pointer vers 1913. On 
peut aussi faire pointer un second arc « date de parution » vers 1918 (la 
parution de l’ouvrage a ete echelonnee). 


Figure 8-1 

Un schema RDF illustrant I'exemple donne 
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RDF permet done de representer des relations logiques entre differents 

elements, pour permettre a un ordinateur de se construire un arbre, oil ► http-//www w3 org/TR/2004/ 
les differents noeuds sont relies entre eux et oil les relations sont REC-rdf-syntax-grammar-20040210/ 

logiques : relations de livre a auteur pour un ouvrage, de parents a 
enfants dans une famille, etc. oo 

RDF est l’un des standards s’inscrivant dans l’initiative globale du Web 
semantique du W3C. 

En effet, si, au depart, les informations sont le plus souvent structures 
(dans une base de donnees par exemple), les outils web actuels ne retien- 
nent aucun element du modele de donnees, pour se concentrer exclusi- 
vement sur la forme. II devient alors impossible de mettre en oeuvre un 
traitement intelligent de l’information (par un moteur de recherche par 
exemple). Seul l’etre humain est en mesure de retrouver les relations. 

RDF est l’un des moyens proposes par le W3C pour modifier cet etat de 
fait en permettant de decrire les relations logiques et structures entre 
differents elements. 


Culture Formats RSS et RDF 

Depuis quelques annees, notamment grace au developpement des blogs, de nombreux 
sites proposent au lecteur de suivre directement leurs dernieres nouveautes grace a un 
fichier RSS. II existe differentes versions entierement distinctes de cette norme : RSS 0.91 , 
RSS 2.0, RSS 1 .0. Les versions 0.91 et 2.0 sont des fichiers XML traditionnels et la version 
1.0 est fondee sur RDF. 

En couplant un format standard a I'API RDF de Mozilla, on obtient facilement une integra- 
tion reussie : e'est ainsi que vous pouvez ajouter dans vos favoris un fil RSS, qui sera par 
exemple integre dans Firefox, sous forme de liste contenant les differentes nouvelles. 


Noeuds et URI 

Vous pouvez utiliser trois types differents de noeuds : 

• Noeuds litteraux : e’est ce que nous avons utilise plus haut, ils con- 
tiennent l’equivalent de chaines en programmation. Exemple : 

« Marcel Proust » 

• Noeuds URI : lorsque vous faites reference a un noeud qui a ete defmi 
ailleurs, ou a un noeud qui a lui aussi ses propres proprietes, e’est en 
quelque sorte un objet. Ainsi, dans l’exemple simplifie precedent, « A 
la recherche du temps perdu » serait le noeud http://www.xulforum.org/ 
livres/recherche, auquel se lieront des arcs pour definir differentes rela- 
tions logiques du livre : vers son auteur, ses 7 tomes, etc. 

• Noeuds vides : lorsque vous faites reference a un noeud URI qui n’a 
pas encore ete defmi. 
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Pour eviter de representer sous forme de texte les relations decrites pre- 
cedemment (meme si cela est possible avec N-Triples par exemple), un 
schema sera largement plus clair ! 



Serialisation de RDF avec RDF/XML 

La serialisation est tres simple : nous placerons a l’element racine deux 
espaces de nommage : l’un pour RDF/XML et l’autre pour nos propres 
elements (ce sera http://www.xulforum.org/rdf#). En fait, l’espace de nom- 
mage choisi n’a aucune relation avec un site web. Simplement, pour 
eviter les confusions avec d’autres sites, nous utilisons un espace de nom- 
mage fonde sur l’adresse du site. Le diese final est une convention qui 
permet d’ecrire les champs sous la forme http://www.xulforum.org/ 
rdf#nomduchamp et les noeuds sous la forme http://www.xulforum.org/rdf/ 
noeud1/noeud2. Dans les fichiers contents . rdf, nous n’utilisions pas 
d’URI fondees sur un site web, mais des URI commenfant par 
urn: mozi 11a. Le resultat est bien sur le meme. 
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En RDF/XML, on utilisera un element Description pour decrire un 
noeud. 

<?xm1 version="1.0" ?> 0 

<RDF : RDF xml ns : RDF="http ://www.w3 . org/1999/02/22-rdf-syntax-ns#" 
xml ns : XF=" http : //www . xul forum . org/ rdf#"> 0 
<RDF : Descri pti on 

RDF : About=" http : //www. xul forum . org/ rdf /I i vres/ recherche" 
XF:titre="A la recherche du temps perdu" /> 0 
</RDF : RDF> 

D’abord, on ouvre le fichier avec le desormais traditionnel prologue 
XML Q. Ensuite, on specific lelement racine RDF: RDF, avec comme 
espace de nommage celui correspondant au standard RDF 0 . 

L’ element interessant est lelement RDF: Descri pti on 0. II represente un 
noeud, le noeud http://www.xulforum.org/livres/recherche, specifie grace a 
l’attribut RDF: About. Ses attributs ne dependent pas du format RDF/ 
XML mais de notre contenu, ils utilisent done l’espace de nommage XF, 
comme XUL Forum ! 

Via l’attribut XF:titre, remplace grace a l’espace de nommage par Fare 
www.xulforum.org/rdf#titre, on le relie a un noeud texte representant son 
titre. Cependant, deux problemes se posent. 

• Si Ton veut specifier un autre noeud URI pointant vers l’auteur par 
exemple, Futilisation d’un attribut n’est pas possible. En effet, com- 
ment faire rentrer un nouvel element Description dans un attribut ? 

• Si l’on veut specifier deux valeurs pour les dates de parutions, ceci ne 
sera pas possible, car on ne peut specifier deux fois un attribut en XML. 

Nous allons done utiliser une syntaxe alternative, equivalente a celle vue 
plus haut, qui nous permettra de specifier deux valeurs pour la date de 
parution et un noeud pour Fauteur. 

<?xm1 version="1.0" ?> 

<RDF : RDF xml ns : RDF=" http : //www. w3 . org/1999/02/22-rdf-syntax-ns#" 
xml ns :XF="http : //www. xul forum. org/ rdf#"> 

<RDF : Descri pti on 

RDF : About=" http : //www. xul forum . org/ rdf /auteur s/p roust" 

XF: prenom="Marce1 " XF : nom="Proust" /> 

<RDF : Descri pti on 

RDF : About=" http : //www. xul forum . org/ rdf /I i vres/ recherche" 
XF:titre="A la recherche du temps perdu"> 

<XF : datedeparuti on>1918</XF : datedeparuti on> 

<XF : datedeparuti on>1913</XF : datedeparuti on> 

<XF:auteur 

RDF : Resource=" http: //www. xul forum.org/ rdf/auteurs/proust" /> 
</RDF : Descri ption> 

</RDF : RDF> 
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On cree un premier noeud appele auteurs/proust, avec nom et prenom. 
Ensuite, dans le noeud livres/recherche, on ajoute trois elements fils. 
Deux dates de parution, c’est-a-dire deux elements XF:datedeparution 
fils et un element XF: auteur, pointant vers un autre noeud grace a l’utili- 
sation de l’attribut RDF: Resource (c’est ici un lien entre elements qui est 
specific dans le cadre de RDF/XML). 

Les deux syntaxes peuvent etre melees pour simplifier la lisibilite. La 
premiere est recommandee car elle est moins gourmande en balises sup- 
plementaires, mais la seconde est souvent indispensable. 


File Edit View Go Bookmarks lools Help 

’ Q & \L http://localhost/~jonathan/truc.rdf ▼ © Go | [CL 

^■Getting Started © Latest Headlines Q xulforum.xul 


This XML file does not appear to have any style information associated with it. The document tree is shown below. 


- <RDF:RDF> 

<RDF:Description RDF:About="http://www .xulforum.fr/rdf/auteurs/proust" XF:prenom="Marcel" 
XF:nom="Proust"/> 

- <RDF:Description RDF: About= "http ://www .xulforum.fr/rdf/livres/recherche" XF:titre="A la recherche du temps 
perdu "> 

<XF:datedeparution>1918</XF:datedeparution> 

<XF:datedeparution>1913</XF:datedeparution> 

<XF:auteur RDF:Resource="http://www.xulforum.fr/rdf/auteurs/proust"/> 

</RDF:Description> 

</RDF:RDF> 


avaxhome 


Done 


MO 


Figure 8-3 Notre document RDF visualise dans Mozilla 


OuilLS Configuration du serveur Apache 

Apache ne sait pas comment gerer les fichiers RDF par defaut et les envoie au navigateur 
du visiteur comme de simples fichiers texte. Ceci empeche Mozilla d'utiliser son parseur 
XML pour vous permettre de deceler d'eventuelles erreurs de syntaxe. II faut editer sur les 
serveurs web un fichier appele . htaccess, qui sera place dans le dossier contenant les 
fichiers RDF. Ajoutez-lui la ligne suivante : 

AddType text/xmf .rdf 

Ainsi, vous pourrez placer votre fichier RDF sur un serveur web pour le visualiser directe- 
ment dans Mozilla et tirer parti de son analyse XML. L'utilisation d'une « URL file » ne 
marche pas, Mozilla tentant d'interpreter le fichier RDF comme une page web dassique. 
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Listes 


Pour utiliser une liste en RDF, on utilisera des arcs speciaux definis par 
RDF : _1 pour Fare menant vers le premier element, _2 et ainsi de suite. 
L’element RDF: Description sera remplace par RDF:Seq, pour annoncer 
une sequence ordonnee delements, car il faut prendre en compte l’ordre 
de parution des differents tomes. 

Ainsi, on pourra ecrire, pour lister les differents tomes de la recherche : 

<RDF : Seq 

RDF : About=" http : //www. xul forum .org/rdf/1 iv res/recherche" 
<RDF:_1> 

<RDF:Description 

RDF :About=" http: //www. xui forum. org/rdf/1 ivres/recherchel" 
XF:titre="Du cote de chez Swann" /> 

</RDF :_1> 

<RDF:_2> 

<RDF:Description 

RDF: About=" http: //www. xul for urn. org/rdf/1 ivres/recherche2" 
XF:titre="A 1 'ombre des jeunes filles en fleurs" /> 

</RDF :_2> 


Culture Les differents conteneurs RDF 

RDF : Seq fait partie des conteneurs RDF ; ils sont 
au nombre de trois, et tous se remplissent le plus 
souvent avec des elements RDF : 1 i . On retrou- 
vera ainsi RDF: Bag pour contenir des elements 
non ordonnes, et RDF: Alt, oil le premier 
RDF : 1 i represente une valeur par defaut et les 
suivants, des alternatives. 

► http://www.w3.org/TR/2004/ 
REC-rdf-syntax-grammar-20040210/ 
#section-Syntax-list-elements 


</RDF : Seq> 


Cependant, ceci n’est pas aise a gerer. RDF/XML nous propose done 
Futilisation d’un element special 1 i qui numerate automatiquement. Le 
code suivant est done equivalent : 

<RDF : Seq 

RDF : About=" http : //www. xul forum .org/rdf/1 iv res/recherche" 

<RDF : 1 i > 

<RDF:Description 

RDF :About="http: //www. xul for urn. org/rdf/1 ivres/recherchel" 
XF:titre="Du cote de chez Swann" /> 

</RDF : 1 i > 

<RDF : 1 i > 

<RDF:Description 

RDF :About="http: //www. xul for um.org/rdf/livres/recherche2" 
XF:titre="A 1 'ombre des jeunes filles en fleurs" /> 

</RDF : 1 i > 

</RDF : Seq> 


C’est le principe utilise dans les fichiers contents . rdf de Mozilla : le noeud 
urn :mozi 11a: package: root est une liste contenant les differents paquets 
decrits, le principal etant bien sur urn :mozi 11a: package: xul forum. Mais 
on aurait pu ajouter u rn : mozi 11 a: package :xf admin pour une interface 
d’administration au forum ; notre extension aurait alors contenu plusieurs 
paquets. 
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Generation de RDF avec PHP 


ASTUCE Verifiez vos fichiers RDF ! 

Vous pouvez d'abord les ouvrir via Mozilla, pour 
verifier que le document n'est pas mal forme et 
ensuite les soumettre au validateur du w3c. 

► http://www.w3.org/RDFA/alidator/ 


Alternative SQLite 

Line autre nouveaute tres importante de PHP5 
est ['inclusion de la base de donnees SQLite. 
Elle se passe totalement de serveur, en ecri- 
vant directement dans un fichier le contenu 
des tables. II n'y a done qu'une librairie 
cliente. II aurait ete interessant d'utiliser cette 
nouvelle technologie pour XUL Forum, mais la 
encore, les memes limitations que pour 
MySQLi refont surface. 

EQ Les cahiers du programmeur PHP5, 
Eyrolles (chapitre sur SQLite) 


WWW 


Objectifs 

Nous allons utiliser PHP 5 pour nous connecter a une base de donnees 
MySQL contenant les messages du forum. Le script PHP devra se con- 
necter au serveur MySQL, utiliser le DOM pour creer le document 
RDF et l’envoyer sur le navigateur du client. Ensuite, nous utiliserons 
XUL pour creer du contenu fonde sur ce fichier RDF. 

La structure des tables est la suivante : 


mysql> show columns from xf_sujets; 

Field Type Null Key Default Extra 

id int(7) PRI NULL auto_i ncrement 

titre varchar(255) 

texte text 

auteur varchar(255) 

date datetime 0000-00-00 


mysql> 
Field 
i d 

s_i d 

titre 

texte 

auteur 

date 


show columns from xf_messages; 


Type Null 

Key 

Default 

i nt(7) 

PRI 

NULL 

i nt(7) 


0 

varchar(255) 

text 

varchar(255) 
dateti me 


0000-00-00 


Extra 

auto_i ncrement 


Deux tables sont utilisees. L’une pour Stocker les sujets, avec cinq 
champs : un identifiant (un entier a sept chiffres), le titre (255 caracteres 
maximum), le texte, l’auteur (meme taille) et la date (un champ sous la 
forme YYYY-MM-DD HH:MM:SS) du sujet. La seconde stocke les 
messages : le champ s_id correspond a l’identifiant du sujet auquel se 
rapporte ce message. 

L’utilisation de PHP5 nous permettra de tirer parti de son nouveau 
modele DOM, plus conforme a l’implementation standard que celui de 
son predecesseur PHP4 et de son modele objet, qui tous deux permet- 
tront d’accentuer le parallele avec le travail deja effectue en JavaScript 
dans les chapitres precedents. 


Indispensable La reference DOM de PHP 

Un bon developpeur PHP ne connait pas les fonctions par coeur : il sait utiliser efficace- 
ment la documentation. C'est pourquoi, vous aurez souvent une fenetre ouverte a 
I'adresse suivante : 

► http://fr.php.net/DOM 
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B.A.-BA PHP 

PHP est un langage de script cree au milieu des annees 1990 par Rasmus Lerdorf. Au 
depart constitue de quelques scripts Perl, PHP a ete recrit en C, puis s'est vu ajouter un 
nouveau moteur pour sa version 3. Les nombreuses extensions, la facilite de mise en 
oeuvre, la syntaxe familiere au developpeur I'ont propulse comme premier langage de 
developpement web avec sa version 4. Encore largement en usage a I'heure actuelle, cette 
version est appelee, a terme, a disparaTtre au profit de la nouvelle version, PHP5. Cette 
version apporte ce que les developpeurs attendaient depuis longtemps : un modele objet 
enfin robuste et fiable, une interaction accrue grace a une extension SOAP, un support des 
exceptions, etc. 

Sa syntaxe est extremement simple et se rapproche d'un langage comme le C : 

• les noms de variables sont precedes du signe dollar $ ; 

• les methodes d'un objet sont appelees grace a I'operation ->, familiere a ceux ayant 
manipule des pointeurs de structures en C ; 

• les instructions se terminent la encore toutes par un point-virgule ; 

• les blocs try/catch fonctionnent de la meme maniere qu'en JavaScript ; 

• le code est encadre dans la page HTML entre des balises <?php et ?> ; 

• les chaines se concatenent grace a I'operateur . (point). 


Le fichier PHP 

La syntaxe utilisee est orientee procedural pour MySQL, car l’extension 
est originaire de la version 4 de PHP, version oil le modele objet n’etait 
pas tres prononce. En revanche, la nouvelle extension DOM de PHP5 
est entierement objet. 


La generation d’un fichier RDF en PHP5 

<?php < 

header("Content-type: text/xml") ; 

$d = new DOMDocumentC’l.O' , 'utf-8'); < 


$r = $d->createElementNS( * 

"http://www.w3.Org/1999/02/22-rdf-syntax-ns#", "RDF: RDF") ; 


$r->setAttri bute("xml ns :XF" , "http://www.xul forum.org/ rdf#") ; < 
$d->appendChi 1 d($r) ; < 
try { < 


Pre-requis : un en-tete HTTP indiquant que Ton 
envoie un fichier XML au navigateur. 

La variable d, comme document, represente le 
document DOM que nous manipulons. 

On commence par creer I'element RDF: RDF 
racine, via la methode createEl ementNS (le 
premier argument est le nom de I'espace de 
nommage associe, le second est le nom de I'ele- 
ment). 

On choisit un second espace de nommage pour 
I'element racine. 

On ajoute I'element racine en premier dans le 
document DOM. 

Nous entrons dans un bloc try/catch, d'ou 
I'on sortira a la premiere erreur. 
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On tente de se connecter au serveur MySQL. Si ► 
Ton echoue, on lance une exception. Le @ sup- 
prime les erreurs lancees sur la sortie standard 
qui compromettraient I'analyse du document 
XML. 

De meme, on selectionne la base de donnees qui ► 
contient nos tables. En cas d'erreur, nouvelle 
exception (remarque : mysql_select_db 
est equivalent). 

La requete SQL demande a rapatrier quatre ► 
colonnes, dans I’ordre descendant des dates 
(message le plus recent en premier). 


On initialise un tableau qui contient la liste des ► 
id des sujets. 

On lance une boude qui, tant qu'il y a des resul- ► 
tats a lire en provenance de la requete MySQL, 
cree un element RDF : Descri ption. 

Ensuite, on ajoute un attribut about, qui con- 
tiendra une valeur similaire a : 
http://www.xulforum.org/sujets/ 

[[id du sujet]] 

avec un remplissage du tableau idsSujets 
pour ensuite identifier les sujets lorsque nous en 
ferons la liste plus tard. La boude remplit aussi 
divers attributs concernant le sujet (titre, auteur, 
date) puis I'ajoute a [element racine. 


L'etape suivante cree [element RDF : Seq amene > 
a contenir la liste des sujets. 


On parcourt le tableau contenant les i d de tous ► 
les sujets existants. Pour chaque element, on 
recupere I'i d correspondant, on cree une res- 
source http://www.xulforum.org/sujets/jjid 
du sujet]] et on I'ajoute a [element RDF : Seq. 


Enfin, on ferme le bloc try et on attrape une ► 
eventuelle exception. La derniere etape exporte 
I'arbre $d en XML et I'affiche sur la sortie stan- 
dard, c'est-a-dire la page web. 


SmysqlConn = @mysql_connect("192 . 168 . 0. 5" , "jonathan", 

1 1 * * * * 1 1 ^ . 

if ( ! $mysql Conn) 

throw new Exception("Impossible de se connecter ! ") ; 


$mysql Ressource = @mysql_query ("USE Jonathan"); 
if (! $mysql Ressource) 

throw new Excepti on("Impossi bl e de selectionner la base"); 


$mysql Ressource = @mysql_query ( 

"SELECT titre, auteur, date, id FROM xf_sujets 
ORDER BY date DESC") ; 
if (! $mysql Ressource) 

throw new Exception("Impossible de chercher"); 
$idsSujets=array() ; 


while (So = mysql_fetch_object($mysqlRessource)) { 

Se = Sd->createElement("RDF:Descri ption") ; 
$e->setAttri bute("RDF : about" , 

"http://www.xulforum.org/sujets/". ($o->i d) ) ; 
Se->appendChi 1 d ($d->c reate El ement("XF : titre" , 
utf8_encode($o->titre))) ; 

Se->appendChi 1 d($d->c reate El ement("XF : date" , 
utf8_encode($o->date))) ; 

Se->appendChi 1 d ($d->c reate El ement("XF : auteur" , 
utf8_encode($o->auteur))) ; 

Sr->appendChi 1 d($e) ; 

SidsSujets[] = $o->id; 

} 

Se = Sd->createElement("RDF:Seq") ; 

Se->setAttribute("RDF:about" , 

"http://www.xulforum.org/sujets") ; 

$r->appendChi ld($e) ; 

foreach (SidsSujets as Sid) { 

$1 = Sd->createElement("RDF:li") ; 
Sl->setAttribute("RDF: resource" , 

" http: //www. xul forum. org/sujets/$i d") ; 
Se->appendChi 1 d ($1 ) ; 

} 

} catch (Exception Se) { 

exit(Se->getMessage()) ; 


echo Sd->saveXML() ; 
?> 
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Pour aller plus loin MySQLi 

MySQLi, comme « MySQL improved », est la nouvelle extension MySQL 
de PHP. Elle permet de tirer profit des ameliorations presentes dans les 
versions superieures a 4.1 de MySQL et introduit un reel modele objet. 
Nous avons volontairement choisi de ne pas utiliser cette extension, 
parce que la plupart des lecteurs ayant deja aborde PHP connaissent sur- 
tout MySQL et que, MySQLi, encore recente, n'est pas encore entree 
dans les moeurs chez les hebergeurs. Si vous voulez utiliser PHP4 (votre 
hebergeur vous I'impose et n'est pas encore passe a PHP5), vous n'aurez 
en fait que la partie DOM a « backporter ». 

Si vous voulez aller plus loin, la recriture du code en utilisant I'extension 
MySQLi et son modele objet serait un bon exercice ! 



Figure 8-4 Le document RDF cree par le script PHP 
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Attention Mise a jour des sources RDF 

Par defaut, Mozilla met plusieurs minutes avant 
de remettre a jour une source RDF (placee en 
cache auparavant). Nous verrons plus loin dans 
ce chapitre comment controler la mise a jour 
d'une source avec JavaScript ; pour I'instant, la 
meilleure solution reste de fermer/rouvrir le 
navigateur. 


Attention Liste limitee 

Comme nous utilisons PHP, une precaution inte- 
ressante serait de limiter, pour cette creation en 
particulier, le nombre de sujets fournis : on 
pourra ainsi utiliser une URL comme http://.../ 
rdfmessages.php?nombre=5 pour res- 
treindre du cote de PHP le nombre de sujets a 
fournir. 


Retour a XUL 

Maintenant que le fichier RDF contenant les donnees est cree, XUL va 
pouvoir en tirer immediatement profit. Un petit cadre presentant les 
derniers messages du forum en page d’accueil nous permettra d’informer 
l’utilisateur et de nous former aux modeles (templates) XUL. 


Un premier modele simple 


Le premier modele XUL 

cvbox datasources= 

"http: //I ocal host/~jonathan/xul forum/rdfmessages . php" 
ref="http ://www. xul forum.org/sujets"> 0 
<label styl e="font-wei ght : bold;" 

value="Les derniers sujets sur Xul Forum !" /> 

<template> 0 
<rule> 0 

<conditions> 0 

<content uri="?sujets" /> 0 

<inember contai ner="?sujets" chi ld="?sujet" /> 0 
<triple subject="?sujet" 

predi cat e=" http : //www . xul forum . org/ rdf#ti tre" 
object="?titre" /> 0 
</conditions> 

<action> 0 

<label uri="?sujet" value="?titre" /> 0 
</acti on> 

</ rul e> 

</templ ate> 

</vbox> 


La premiere etape Q consiste a ouvrir une boite. On indique d’abord 
qu’elle est amenee a etre remplie par le contenu fourni par le fichier 
RDF rdfmessages . php, grace a son attribut datasources et on indique 
aussi que l’element RDF de base sera http://www.xulforum.org/sujets, c’est- 
a-dire la sequence des sujets. L’element template en 0 annonce l’ouver- 
ture d’une partie decrivant la maniere de creer le code. L’element rule 
0 est un conteneur pour les differentes regies de generation. II contient 
en premier les conditions Q, qui se structurent de la maniere suivante : 

• l’element content definit une variable ?su jets 0 qui represente la 
sequence d’elements http://www.xulforum.org/sujets, sur laquelle 
nous nous sommes fondes pour notre creation de contenu ; 

• on parcourt la sequence ?sujets 0 et chaque element de cette 
sequence se voit associer un nom de variable : ?sujet (sans s !) ; 

• pour chaque ?sujet 0 , on associe a sa propriete http://www.xulforum. 
org/rdf#titre la variable ?titre. 
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Et une fois que les conditions sont definies, il est temps de passer a 
Taction @ ! On cree un element label montrant le titre du sujet Q. Le 
resultat est le suivant : 


File Edit View Go Bookmarks lools Help 

O • © t_J* ^ & Q chrome://xulforum/content/xulforum.xul 

^Getting Started s Latest Headlines Q xulforum.xul QLivre QAtester 


H ©go | EL 


9.5 -Advanced Rules I (j 9.2 - Templates 


□ 


Fichier Connexion Configuration 



Identification 



Votre nom : 

_j| 


Votre mot de passe : 

□ 


Options avancees □ 




OK 


Les demiers sujets sur XUI Forum ! 



XUL est-il un langage de choix ? 



L'interaction entre XUL et PHP 



acceder au test Idap 



Rien a signaler 

Non lus : 3 Total : 50 


Done 


iMO 


Figure 8-5 La liste des sujets creee automatiquement 


Si Ton veut afficher le titre de la premiere reponse a ce sujet, on peut 
creer une regie plus complexe (qui necessite cependant que les sujets 
aient un message par defaut) : 

<!-- a ajouter dans les conditions --> 

<member contai ner="?su jet" chi 1 d="?message" /> 
ctriple subject="?message" 

predicate=" http://www.xul forum. fr/rdf#titre" 
object="?titrem" /> 

<! — puis dans l'action --> 

<label uri="?sujet" 

val ue="?titre (premiere reponse : ?titrem )" /> 
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Un modele plus complexe 

Ceci n’etait qu’une introduction : nous allons directement remplir l’arbre 
avec les sujets et leurs reponses correspondantes grace a une methode 
similaire. 


Alternative Autres types de templates 

Sur le site de reference, xulplanet.com, vous pourrez explorer bon nombre de cas typiques 
d'utilisation d'un modele de templates XUL. Leplus souvent, la solution de votre probleme 
se trouvera dans un des nombreux cas de figure offerts. 

► http://www.xulplanet.com/testcases/example-viewer.xul 


Modification cote PHP 

II nous faut d’abord modifier la creation du fichier RDF, qui ne produit 
pour l’instant que la liste des sujets. L’ajout dune seconde boucle, qui, 
pour chaque sujet, cree une liste de messages correspondants, nous 
permet d’obtenir le resultat suivant : 


file Edit View Go Bookmarks Iools Help 

- C> ■ I I jjj} ;.-J- j~ Q http;/y1ocalhost/-jo nathon/Kulforum/rdfmcssogcs.php |^| O Go 

^Getting Started ©I atest Headlines Qxultomm.Mil , J 1 ivre JA tester 

fg rhromo/Miiforu ntent/index xul rrwiki Xlllfr - Source DeDnnnees ... | a wiki XUIfr ■ Applis Weh/Fxemple fj L http://localh... messages. php Q 


This XML file does not appear to have any style information associated with it. The document tree is shown below. 


- <RDF:RDF> 

+ <RDF:Descriptlon RDF:about="http://www.xulforum.fr/sujets/0"><r/RDF:Description> 

+ <RDF:Description RDF:about="http://www.xulforum.fr/sujets/l ”></RDF:Description> 

- <RDF:Seq RDF: a bout-"http://www. xulforum.fr/sujets"> 

<RDF:li> 

- <RDF:Seq RDP:about-"http;//www.xulforum.fr/siuets/0"> 

<RDF:li RDF: resource ="http://www.xulforum.fr/sujets/0/messages/07> 

<RDF:li RDF:resouice="hU.p://www Jtulfonjin.fr/sujeLs/0/iiiessayes/r , /> 

</RDF:Seq> 

</RUF:li> 

- <RDF:li> 

- <RDF:Soq RDF: abou t="http://vrvrvr.xulforum.fr/sujcto/l "> 

<RDF:li RDF:resource="http://www.xulforum.fr/sujets/l/messages/07> 

<RDF;li RDF:resource-"http://www.xulforum.fr/suiets/l/messages/l 7> 

</RDF:Seq> 

</RDF:ll> 

</RDF:Ssq> 

+ <RDF:Description RDF;about="http://www.xultorum.fr/sujets/0/messages/0"></RDF:Description> 

+ <RDF:Description RDF:about-"http://www .xulforum.fr/sujets/O/messages/1 "></RDF:Description> 

+ <RDF:Doscription RDF:about="http://vrvrw.xulforum.fr/sujcto/l/mcssagoo/0"x/RDF:Dcscription> 

+ <RDF:Description RDF:about="http://www Jtulforum.fr/sujets/l/messages/l "></RDF:Description> 

</RDF:RDF> 

Done | M 0 


Figure 8-6 Le nouveau fichier RDF avec un niveau de profondeur supplemental 
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Astuce Erreurs RDF 

A la suite des ameliorations de la creation de RDF, au 
lieu d'utiliser un simple exit() dans le bloc catch, on 
peut creer un « RDF de secours », c'est-a-dire un faux 
sujet avec une fausse premiere reponse, contenant 
I'erreur. 

On peut creer entierement le document d'erreur avec 
PHP, mais la tache est assez lourde, meme si cela reste 
faisable (voir a ce propos les lignes mises en commen- 
taire dans rdfmessages . php, a recuperer sur le site 
du projet). 

Une solution plus rapide consiste a ecrire un fichier 
RDF de base « a la main », a le charger dynamique- 
ment via PHP et a modifier les deux/trois attributs 
necessaires. 

<! — le premier message du premier sujet, 
avec les attributs id pour manipuler ensuite 
le contenu via php — > 

<RDF:Description RDF:about= 

"http://www.xul forum. org/sujets/O/ 
messages/0"> 

<XF:titre xml : i d="ti treErreur"> 

</XF : ti tre> 

<XF:date xml : id="dateErreur"x/XF:date> 
<XF:auteur>XUL Forum - serveur rdf 
</XF : auteur> 

</RDF : Descri pti on> 


Les attributs xml :id permettent de signifier a I'analy- 
seur que I'attribut id n'est pas un attribut quel- 
conque appartenant a un eventuel espace de 
nommage par defaut. En faisant appartenir cet id a 
I'espace de nommage XML, on le rend comprehen- 
sible par le DOM et on peut ainsi utiliser la methode 
getElementByldO, ce qui n'aurait pas ete possible 
sans le xml : devant. 

/* PHP : dans le bloc catch, a la place de 
exit() */ 

$d->loadXML(fi le_get_contents( 

"erreurtype . xml ")) ; 

$e = $d->getEl ementById("ti treErreur") ; 
$e->appendChi 1 d(new 

DOMText($ex->getMessage())) ; 

$d->getEl ementById("dateErreur")-> 

appendChi 1 d(new DOMText(date('c'))) ; 

Ainsi, I'on remplace juste les contenus qui changent 
en fonction de I'erreur et on peut communiquer effi- 
cacement avec I'utilisateur, sans surcharger le code 
PHP. N'oubliez pas de supprimer les erreurs grace a 
I'operateur @ devant le nom de la fonction, sinon 
elles s'affichent sur la sortie standard et empechent 
I'analyse du document XML. 
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Chaque sujet est desormais une liste : la sequence principale est une 
sequence de sequences. Chaque sujet contient la liste de ses messages, 
sous forme d’elements li pointant vers des Description. Ceci va nous 
permettre d’utiliser une recursion pour l’arbre, c’est-a-dire que nous 
allons creer du contenu avec plusieurs niveaux de profondeur. II y aussi 
un nouvel attribut 1 u qui porte la valeur nonl u lorsque le sujet n’est pas lu 
et qui n’est pas specifie dans le cas contraire. 

Exploitation cote XUL 

C’est maintenant le fichier index-forum-overlay.xul qui va subir quel- 
ques modifications. Notre remplissage d’exemple va etre modifie au 
profit d’un vrai remplissage RDF : 
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La nouvelle version de I’arbre 

ctree id="xf-index-arbre" flex="l" datasources= 

"http: //I ocal host/~jonathan/xul forum/rdfmessages . php" 
ref="http ://www. xul forum.org/sujets"> 

<treecol s ... /> 

ctempl ate> 
crul e> 

cconditions> 

<content uri="?messages" /> 

<member contai ner="?messages" chi ld="?message" /> 
ctriple subject="?message" 

predi cate="http: //www. xul forum.org/ rdf#ti tre" 
object="?ti tre" /> 
ctriple subject="?message" 

predi cate=" http: //www. xul forum. org/rdf#auteur" 
object="?auteur" /> 
ctriple subject="?message" 

predi cate="http : //www . xul forum . org/rdf#date" 
object="?date" /> 
c/conditions> 
cbindings> 

cbinding subject="?message" 

predi cate=" http: //www. xul forum.org/ rdf#1 u" 
object="?1u" /> 
c/bindings> 
caction> 

ctreechi 1dren> 

ctreeitem uri="?message"> 
ctree row> 

ctreecell properties="?1u" labe1="?titre" /> 
ctreecell 1abe1="?date" /> 
ctreecell label="?auteur" /> 
c/tree row> 
c/treeitem> 
c/treechi 1 dren> 
c/action> 
c/rule> 
c/template> 
c/tree> 


Attention URI de base 

Vous remarquerez que le ccontent uri="?sujets"> de I'exemple precedent s'est 
mue en ccontent uri ="?messages"> mais la sequence de base est toujours : 
http://www.xulforum.org/sujets/ ! 

Ce n'est en fait qu'une question de mise en forme... il est plus logique d'appeler la 
sequence de base ?messages car nous considerons tous les messages du forum I La 
sequence de depart reste bien sur la sequence : 
http://www.xulforum.org/sujets. 
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Void les prindpaux changements par rapport au modele precedent : 

• II y a plus d’elements <triple> : titre, mais aussi auteur et date du 
sujet/message. 

• Un nouvel element binding fait son apparition : il est similaire a un 
triple, mais n’est pas forcement present dans le fichier RDF (le ser- 
veur peut ne pas specifier d’attribut 1u). Si effectivement le message 
n’est pas lu, il permettra, grace a sa valeur nonlu, de reutiliser le style 
vu au chapitre sur les CSS. 

• L’attribut uri="?message" est place sur un conteneur. Ceci est d’une 
importance capitale, c’est pourquoi nous allons detailler le comporte- 
ment de XUL face a ce type de situation. 

Il y a bien sur plusieurs niveaux de profondeur : un pour les sujets et un 
autre plus en avant pour les messages propres a un sujet. Lorsque c’est un 
sujet qui alimente le modele, nous sommes au premier niveau de profon- 
deur et il ne se passe rien de particulier, les elements <treechi 1dren> 
<treeitem> sont ajoutes a l’arbre. 

Mais lorsque Ton entre dans les messages en reponse a un sujet, on aug- 
mente le niveau de profondeur ! En effet, et on le voit bien sur la copie 
d’ecran du rdfmessages .php modifie, la sequence principale des sujets 
contient les differents sujets... mais chaque sujet est lui-meme une 
sequence ! Ce qui fait au total deux niveaux de profondeur. Et c’est ici 
que le comportement devient particulier. Comme l’attribut uri est place 
sur le treei tem, l’integralite du modele est repris et ajoute comme enfant 
du treeitem. 


Alternative Syntaxe simplifiee ? 

II existe une syntaxe alternative pour les sources RDF ne demandant qu'un traitement 
basique. Elle aurait pu etre utilisee pour afficher uniquement les titres des sujets, dans le 
premier exemple. Void sa syntaxe : 

<vbox datasources= 

"http : //local host/~jonathan/xul forum/rdf messages . php" 
ref=" http: //www. xu1forum.org/sujets"> 

<label styl e="font-wei ght : bold;" 

value="Les derniers sujets sur XUL Forum !" /> 
ctempl ate> 

clabel uri="rdf:*" 

val ue=" rdf : http : / /www. xul forum . org/ rdf#ti t re" /> 
</template> 

</vbox> 

La vision de la structure RDF est moins evidente... et de plus, cette syntaxe est a eviter 
dans le cas de traitements complexes. Attention done aux solutions qui ont Fair plus 
simples : elles peuvent se reveler difficiles a faire evoluer ! 
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Autrement dit, on obtient : 


Simulation du modele 

<treechi ldren> 

<treei tem> 

<treerow . . . /> 

<!-- jusqu'ici tout correspond a un sujet genere --> 
<treechi 1 dren> 

<treeitem> 
ctreerow. . .> 

<!-- ces trois elements proviennent du modele qui a 
ete genere de nouveau, mais comme enfant du 
treechildren --> 

Ceci nous permet d’obtenir du XUL conforme a la syntaxe, permettant 
de produire des arbres avec differents niveaux de profondeur. 

La situation aurait ete la meme si on avait applique le modele recursif a 
notre premier exemple : il y aurait eu des boites secondaires imbriquees 
dans la boite principale contenant les sujets. 

Cependant, l’utilisation de la source RDF n’est pas optimale : elle n’est 
pas rechargee assez frequemment (les parametres par defaut de Mozilla 
sont de plusieurs minutes de delai et il n’est pas possible de les modifier 
depuis XUL meme, sauf pour des versions tres recentes de Mozilla) et 
nous n’avons pas vu pour l’instant comment choisir dynamiquement la 
source de donnees, qui est un parametre dependant du forum. 

Nous allons done faire appel a JavaScript pour deux choses. Dune part 
pour extraire FURL du serveur RDF depuis le fichier de configuration 
fourni et Fappliquer sur la source. D’autre part pour rafraichir la source de 
donnees a intervalles reguliers et permettre ainsi un suivi rapide du forum. 


Amelioration de RDF avec JavaScript 

La premiere chose qu’il va falloir changer concerne la source de 
donnees : elle devra etre choisie dynamiquement par JavaScript. Dans la 
page d’authentification, le script devra l’extraire du fichier de configura- 
tion et Fassigner a la boite contenant les derniers messages du forum. 
Dans la page du forum, le principe sera le meme : on inclura les scripts 
pour recuperer le fichier de configuration (transmis dune page a l’autre 
via FURL) et on assignera la bonne source de donnees a l’arbre. 
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Alternatives La vie sans RDF 

L'utilisation de sources de donnees RDF/XML n'est 
qu'une methode parmi plusieurs pour rapatrier du 
contenu distant. On peut citer deux grandes 
alternatives : 

• Utiliser un fichier XML contenant uniquement les 
donnees et I'analyser cote JavaScript avec DOM, 
pour construire le contenu de I'arbre. Avec une 
fonction recursive, il serait possible de ne pas trop 
alourdir le code. Cette technique tres en vogue et 
deja mentionnee dans cet ouvrage est AJAX : 
Asynchronous JavaScript And XML, mais c'est sur- 
tout I'objet XMLHttpRequest qui est utilise. 

► http://en.wikipedia.org/wiki/AJAX 


• Creer du JavaScript cote serveur et I'inclure dans 
XUL Forum. C'est la technique utilisee par Google 
dans son service Google Suggest : du JavaScript tres 
complexe est cree cote serveur et il est directement 
inclus dans le client, pour un maximum d'efficacite... 
et de complexite ! Ceci peut se faire soit par I'inter- 
mediaire d'une balise <script> pointant vers une 
URL distante, soit avec un objet XMLHttpRequest 
rapatriant le code cree par le serveur et I'incluant 
grace a la fonction eval ("chatne contenant le 
code js a i nterpreter") . Cette methode brutale 
peut neanmoins etre appreciable, car le parseur 
RDF/XML de Mozilla a la reputation d'etre lent... 

► http://www.google.com/webhp?complete=1 &hl=en 
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Pour choisir dynamiquement la source de donnees, il n’est pas besoin de 
la choisir dans le fichier XUL. Il faut done utiliser pour la balise tree : 

ctree i d="xf-i ndex-arbre" flex="l" datasources="rdf : nul 1 " 
ref =" http://www.xu lforum.org/sujets"> 

Pour la balise vbox (fichier xul forum. xul), le changement est le meme et 
ne concerne que l’attribut datasources. 


Version synchrone 

Lorsqu’on veut effectuer une operation sur un fichier distant, il y a deux 
possibilites. La premiere consiste a effectuer un appel synchrone : on 
appelle la fonction et JavaScript ne passe a la ligne suivante que quand 
l’operation sur le fichier est terminee. 

Cette methode a l’avantage d’etre extremement simple a utiliser : il n’est 
pas necessaire de mener un suivi « en parallele » de l’operation sur le fichier 
ou d’attendre que l’operation soit terminee avant de passer a la suite. C’est 
cette methode que nous allons d’abord utiliser. 

Nous utiliserons deux fonctions : une premiere pour charger une nou- 
velle source RDF (si par exemple l’utilisateur change de fichier de confi- 
guration, il faudra charger la nouvelle source RDF) et une seconde pour 
mettre a jour la source (tant qu’on n’a pas change de source, on reste sur 
la meme et on la recharge regulierement dans le cas ou il y aurait de nou- 
veaux messages). 


Pour aller plus loin Ecrire dans une source RDF 

Si vous voulez fonder toute la partie stockage de 
votre application sur RDF, c'est possible. Grace a 
une forte utilisation des composants XPCOM, on 
peut ecrire dans une source RDF. Un « cache » 
pour XUL Forum pourrait ainsi etre stocke dans un 
fichier RDF interne. Ceci pourrait constituer un bon 
- quoique tres difficile - exercice... 

Dans le lien ci-dessous, vous trouverez un chapitre 
sur RDF et dans « utilisation des composants 
XPCOM », un chapitre sur les fichiers. 

► http://xulplanet.com/tutorials/mozsdk/ 
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1 chargerSourceRDFO sera appelee apres un chargement du fichier de 
configuration, soit dans la fonction initialisationO, soit apres un 
clic sur le bouton Recharger dans l’ecran d’identification. Elle prendra 
en compte le nouveau parametre cheminrdf du fichier de configura- 
tion. 

2 mettreAJourSourceRDFO sera appelee a intervalles de temps reguliers 
grace a une fonction setTimeoutO, comme nous l’avons vu precedem- 
ment. 


Le fichier content/javascript/rdf.js contenant les routines de telechargement des sources RDF 

var gSource; 

var gRdfElement; /* pour charger la source de donnees RDF */ 

function chargerSourceRDF(pId) { // exemple d'utilisation : chargerSourceRDF("xf-index-arbre") ; 

// pour charger la source RDF vers l'arbre des messages 

try { 

gRdfElement = document. getElementByld(pId) ; Q 
var rdfService = Components . cl asses [ 

"@mozi 11a . org/ rdf/ rdf-servi ce ; 1"] . getService(Components . i nterfaces . nsIRDFServi ce) ; Q 
gSource = rdfServi ce .CetDataSourceBlocking("http://"+gConfi g . php . hote+gConfi g . php . chemi nrdf) ; 0 
gSource .Query In ter face (Components . i nterfaces . nsIRDFRemoteDataSource) ; Q 
gSource .Query Inter face (Components . i nterfaces . nsIRDFXMLSi nk) ; Q 
gRdfElement. database. AddDataSource(gSource) ; 0 

dumpC'Source chargee : "+gConfig.php.hote+gConfig.php.cheminrdf+"\n") ; 
mettreAJourSourceRDFO ; Q 
} catch (e) { 

ajouterErreur("Erreur chargement RDF : "+e) ; 

} 

} 

Le maniement dune source RDF en JavaScript est assez complexe, 

notamment a cause dune grosse utilisation des composants XPCOM. 

Voyons comment fonctionne cet exemple : 

O Pour que les mises a jour ulterieures puissent etre effectuees, on 
stocke lelement amene a etre mis a jour dans une variable globale. 

© II nous faut un service RDF qui fournira les methodes necessaires au 
traitement RDF. On n’utilise pas la methode createlnstanceO vue 
au chapitre precedent car c’est un service. Un service permet de 
manipuler toujours la meme instance. A l’oppose, createlnstanceO 
renvoie un nouveau composant a chaque appel. Ainsi, lorsqu’on 
changera de source RDF, apres un changement dans le fichier de 
configuration par exemple, on aura toujours la meme instance du 
composant rdf-service a manipuler, ce qui evite des doublons en 
memoire. 

II n’y a pas de methode certaine pour determiner si un composant est 
un service ou pas : generalement, on le devine grace au nom. 
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0 On obtient la source grace a FURL fournie dans le fichier de configu- 
ration. Elle est stockee dans une variable globale pour, une fois 
encore, pouvoir etre reutilisee dans les mises a jour ulterieures. 

O On demande les interfaces necessaires (la seconde servira lors des 
appels asynchrones), dans une utilisation legerement differente de ce 
que nous avons vu precedemment. 

0 On ajoute cette source de donnees a lelement concerne (et ceci 
permet de pallier F element vide rdf : nul 1 indique precedemment). 

0 On demande a mettre a jour la source. 

Ceci concerne done le chargement seul de la source RDF et son assigna- 
tion a F element. Voyons maintenant comment rafraichir le contenu de la 
source RDF et construire le modele en consequence. 


Attention 

Supprimer la source precedente 

Dans I'ecran d'identification, si par exemple 
vous changez de fichier de configuration a la 
volee, il faut penser a desassocier I'ancienne 
source de donnees, pour pouvoir ajouter la nou- 
velle. Ces deux lignes permettront de supprimer 
une ancienne source de donnees existante, 
avant d'en ajouter une nouvelle (il faut les 
placer juste apres I'obtention du service RDF) : 

if (gSource != null) 
gRdf Element . database . 

RemoveDataSource(gSource) ; 


Les routines de mise a jour de la source 

/* appelee regul i erement et en cas de bouton recharger */ 
function mettreAJourSourceRDFO { 
try { 

gSource . Ref resh(true) ; 0 //bloquant ! Appel synchrone 

gRdfEl ement .builder . rebuil d() ; 0 

dumpC’Source mise a jour\n")l 
ajouterErreur("Source mise a jour"); 

} catch (e) { 

ajouterErreur("Impossi bl e de mettre a jour la source : "+e) ; 

} 

} 

/* appelee en tout debut de script dans initialisation() 
on aura en plus des appels a mettreAJourSourceRDF 
apres le changement de la source dans chargerSourceRDF */ 

const RDFDELAI = 60000; //mise a jour RDF toutes les minutes 
function mi nuteurRDFO { 
mettreAJourSourceRDFO ; 
setTimeout(minuteurRDF, RDFDELAI) ; 


Ici le fonctionnement est tres simple : on appelle la fonction de mise a 
jour de la source 0 et on reconstruit lelement XUL concerne 0 . 
L’ argument true indique que l’appel est bloquant. La seconde fonction 
sert a effectuer des mises a jour regulieres et sera appelee une unique fois 
en debut de script grace a la fonction i ni tiali sation(). Mais si la source 
est un gros fichier (s’il y a beau coup de messages par exemple), elle peut 
etre longue a recuperer... il faut dans ce cas-la la telecharger en arri Pre- 
plan. 
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Version asynchrone 

Comme les procedures de telechargement et d’analyse du fichier RDF se 
► http://www.xulplanet.com/references/ feront en arriere-plan, il faut que quelqu’un surveille ce qui se fait en 

xpcomref/ifaces/ parallele du script principal. 

nslRDFXMLSinkObserver.html ; , 

C’est le role de l’interface nsIRDFXMLSi nkObserver. 

Nous allons creer un objet remplissant les caracteristiques de cette inter- 
face, en JavaScript et nous allons enregistrer cet objet aupres du service 
RDF afin que ce dernier lui transmette des informations : mise a jour de 
la source, erreur eventuelle... 


L’objet qui va observer devolution du chargement de la source 

var gObserveur = { 

onBeginLoad : function (pSink) { dump("Chargement demarre"); }, 

onlnterrupt : function (pSink) { }, 

onResume : function (pSink) { }, 

onError : function (pSink, pStatut, pErreur) 

{ ajouterErreur("Erreur au chargement ! ”+pErreur) ; }, 
onEndLoad : function (pSink) { 

ajouterErreur("Chargement termine avec succes") ; 
gRdf Element. builder. rebuild() ; 

} 


Figure 8-7 

La nouvelle fonction 
chargerSourceRDF 
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La fonction mettreAJourSourceRDF simplifee 

/* appelee regul i erement et en cas de bouton recharger */ 
function mettreAJourSourceRDFO { 
try { 

gSource.Refresh(false) ; 

} catch (e) { 

ajouterErreur("Impossi bi e de mettre a jour la source : "+e) ; 

} 

} 

II y a quelques changements mineurs par rapport a la version asyn- 
chrone. On enregistre tout d’abord gObserveur aupres de la source grace 
a la methode addXMLSi nkObserver. Ensuite, lorsque Ton ajoute la source, 
on verifie si elle est deja chargee. Si c’est le cas, on reconstruit directe- 
ment l’element (et gObserveur n’a pas servi dans ce cas). 

Si ce n’est pas le cas, la source utilise lelement gObserveur pour effectuer 
le suivi et lorsque ce dernier voit sa methode onEndLoad appelee, a la fin 
du chargement, il s’occupe de reconstruire l’element. 


Astuce Indiquer a I'utilisateur qu'une operation est en cours en arriere-plan 

Nous avions dans les premiers chapitres place un element progressmeter dans la 
barre de statut, en bas a droite de I'ecran. II va maintenant pouvoir nous servir. Nous 
allons le placer en mode « indetermine » pendant toute la duree de I'operation asyn- 
chrone. 

document .getElementById("xf-statusbar-progres") .mode = 
"undetermined"; //en debut d’operation 
document .getElementById("xf-statusbar-progres") .mode = 
"determined"; //en fin d'operation 



Figure 8-8 L'aspect de la barre de progression 
lorsque le mode est a « undetermined ». 


Attention Notion de source deja chargee 

Bien que nous demandions des mises a jour regulieres grace a la fonction Ref resh(), 

la source est consideree comme a jour dans les cas suivants : 

• lorsque que, dans I'ecran d'authentification, on clique sur Recharger dans les 
options avancees et que Ton ne touche pas a I'adresse du fichier de configuration. On 
ne fait alors qu'ajouter une source deja chargee precedemment ; 

• lorsque Ton passe de xul forum . xul a i ndex . xul . La source reste en cache et ne 
sera rechargee que 60 secondes plus tard au prochain appel de Ref resh Q . 
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Dans le cas de la fonction mettreAJourSourceRDFO, les mises a jour sont 
tout le temps non bloquantes, done l’appel aux fonctions de gObserveur 
est systematique et e’est ce dernier qui se chargera de reconstruire l’ele- 
ment. 


ASTUCE Chaines formatees 

Les chaines obtenues avec gStri ngBundl e . getStri ng() n'apparaissent pas dans 
le code pour ameliorer la lisibilite. Cependant, dans le resultat final, elles sont integrees, 
avec une astuce supplementaire. En ecrivant dans le fichier . properties : 

erreurChargementRDFAsync= 

** Erreur au chargement RDF asynchrone, erreur %s , code %s 
on peut utiliser dans JavaScript : 

a j outer Erreur (gStri ngBundl e .getFormattedStri ng( 

"erreurChargementRDFAsync" , new ArrayCpErreur , 
pStatut))) ; 


En resume... 

Les fonctions RDF de XUL Forum sont desormais operationnelles. 
Comme toujours, nous avons d’abord vu une solution simple et efficace, 
qui a ete perfectionnee pour mieux repondre aux contraintes dune vraie 
application : delais de reponse, latence inevitable du serveur... 

• Lecran d’identification presente les derniers messages du serveur, mis 
a jour lorsqu’on change de fichier de configuration. 

• L’ecran du forum, avec sa fonction recursive, remplit parfaitement 
l’arbre des sujets. 

• Le tout est soutenu par d’importantes fonctions de gestion RDF, en 
JavaScript et XPCOM. 

Encore une fois, nous n’ avons pas pu eviter l’utilisation de JavaScript... il 
va d’ailleurs faire une nouvelle apparition dans le chapitre suivant, l’inte- 
gration au coeur de Mozilla. 

avaxhome 
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Pour aller plus loin Les templates XUL 

Nous ne sommes bien sur pas en mesure de decrire de maniere exhaus- 
tive cet enorme pan du framework Mozilla que sont les templates. Neil 
Deakin, I'auteur du tutorial de XUL Planet, vous propose de decouvrir 
leur fonctionnement en detail : a I'heure actuelle, Neil a poste 34 arti- 
cles sur son blog. Au programme : requetes SQL et templates, regies 
avancees, manipulation dynamique des conditions de generation... Le 
premier episode est a I'adresse ci-dessous : 

► http://www.xulplanet.com/ndeakin/article/300/ 
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Line integration 
au coeur de Mozilla 


Jusqu’a maintenant, nous avons developpe XUL Forum dans le 
cadre du navigateur : l’acces s’y faisait par l’intermediaire de 
l’adresse chrome://. II est grand temps d’ajouter quelques 
ameliorations : un bouton dans la barre d’outils par exemple... 


SOMMAIRE 

► Overlays dans le navigateur 

► Enregistrement des choix 
de I'utilisateur dans les 
preferences 

MOTS-CLES 

► nsIPrefService 

► contents.rdf et overlays 
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Dans ce court chapitre, nous presenterons deux possibilites reservees aux 
applications chrome. La premiere consiste a etendre l’interface du navi- 
gateur grace a des overlays qui agissent directement sur les fichiers XUL 
de Mozilla : on pourra ainsi ajouter une entree XUL Forum dans le menu 
Outils par exemple. La seconde permet d’utiliser une sorte de base de 
donnees interne : les preferences, afin de Stocker des donnees comme le 
dernier nom d’utilisateur, la configuration favorite utilisee, etc. 


Extension de I’interface du navigateur avec 
de nouveaux overlays 

Modification du fichier contents.rdf 

Pour que Mozilla puisse prendre en compte nos overlays, il faut les 
annoncer a l’avance : dire quels seront les fichiers XUL du navigateur 
touches par les modifications et preciser dans quels fichiers se trouvent 
nos overlays. Dans les premiers chapitres, lorsque nous avons transforme 
les premiers fichiers XUL en une extension sommaire, nous avons men- 
tionne de futures modifications portant sur le fichier content/ 
contents . rdf. C’est ce que nous allons faire maintenant : enregistrer nos 
overlays dans contents, rdf. 

Les ajouts a content/contents.rdf 

<RDF : Seq about="urn : mozi 1 1 a: overt ays"> 

<RDF: "li resource="chrome: //messenger/content/messenger . xul " /> 

<RDF : 1 i resource="ch rome : //gl obal /content/customi zeTool bar . xul " /> 
<RDF : 1 i resource="ch rome : //navi gator/content/navi gator . xul " /> 
<RDF:li resource="chrome://browser/content/browser.xul" /> 

</RDF : Seq> 

<RDF : Seq about=" chrome : //messenger/content/messenger . xul "> 
<RDF:li>chrome://xul forum/content/messenger-overlay. xul </RDF: li> 

</RDF : Seq> 

<RDF : Seq about=" chrome : //global /content/customi zeTool bar .xul "> 
<RDF:li>chrome://xulforum/content/palette-overlay.xul</RDF: li> 

</RDF : Seq> 

<RDF : Seq about=" chrome : //navigator/content/navigator . xul "> 
<RDF:li>chrome://xulforum/content/mozilla-overlay.xul</RDF: li> 

</RDF : Seq> 

<RDF : Seq about=" chrome : //browser/con tent/browser .xul "> 
<RDF:li>chrome://xulforum/content/fi refox-overlay.xul</RDF: li> 

</RDF : Seq> 
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Attention Firefox 1.5 et Thunderbird 1.5 

Avec ces versions, il n'y a plus de fichier 
contents.rdf. Reportez-vous a I'annexe A 
pour connaitre les quelques lignes a ajouter 
dans le fichier manifest. Les modifications a 
contents.rdf ne s'appliquent done pas si 
vous utilisez I’un de ces deux logiciels. 



INI 

o 


II faut d’abord decrire au travers de la sequence urn:mozilla:overlays 
quels seront les fichiers de Mozilla amenes a subir des modifications. Ce 
peut etre les fichiers contenant les menus, les fichiers contenant la barre 
d’outils... ici ce sera par exemple chrome://navigator/content/ 
navi gator, xul (le fichier principal de la suite Mozilla). Ensuite, pour 
chaque fichier amene a etre modifie, on decrit, toujours sous forme de 
sequence, les differents fichiers de XUL Forum contenant les overlays. 
Dans l’exemple precedent, les overlays de chrome://navigator/content/ 
navigator. xul seront stockes dans l’unique fichier chrome://xulforum/ 
content/mozilla-overlay.xul (les overlays auraient pu etre eclates sur 
plusieurs fichiers separes). Ces modifications sont somme toute assez 
fixes et ne varient guere dune extension a l’autre. La tache interessante 
consiste a chercher les fichiers a modifier... 


Culture Cookies 

Les cookies, ces petits emplacements texte permettant a un site web de Stocker quelques 
informations sur le navigateur du client (derniere visite, nom d'utilisateur, etc.), ont long- 
temps constitue un mystere pour I'utilisateur « normal ». En effet, dans les options, les 
cookies etaient presentes de la maniere suivante « Cookies are delicious delicacies » : 
« Les cookies sont de delicieuses friandises ». Un contributeur au projet a recemment 
modifie le texte en une phrase plus serieuse expliquant la vraie fonction des cookies. 
Blake Ross, I'un des principaux createurs de Firefox, eut pour commentaire 
« Congratulations, You've just destroyed a legend ». 

L'extension Delicious Delicacies, disponible sur http://update.mozilla.org, permet de 
retablir la phrase originale. Si vous dissequez son contenu, vous verrez que son mode 
d'action est exactement le meme que celui que nous sommes en train d'etudier. II existe 
meme une variante de cette extension. 

► https://addons. update. mozilla. org/extensions/moreinfo.php?id=41 3 

► https://addons. update. mozilla. org/extensions/moreinfo.php?id=227 


Ou trouver les fichiers a modifier ? 

Les fichiers cites plus haut paraissent pour l’instant bien obscurs. Com- 
ment trouver le fichier contenant les barres d’outils, les menus ? Ou 
chercher au depart ? Comment connaitre les i d des elements a 
modifier ? En se pretant a une sorte de jeu de piste... 

II y a trois points de departs, selon que Ton agit sur Firefox, Mozilla, ou 
Thunderbird. Tout se concentre dans LXR, l’outil permettant de visua- 
liser les sources de Mozilla en ligne. 

• Pour la suite Mozilla, le fichier central de l’interface, celui qui decrit 
le navigateur, est navi gator, xul. 

• Pour Firefox, nous modifierons browser . xul . 

• Pour Thunderbird, c’estle fichier messenger. xul. 


navigator.xul 

► http://lxr.mozilla.org/seamonkey/source/ 
xpfe/browser/resources/content/ 
navigator.xul 

browser.xul 

► http://lxr.mozilla.org/seamonkey/source/ 
browser/base/content/browser. xul 

messenger.xul 

► http://lxr.mozilla.org/seamonkey/source/ 
mailnews/base/resources/content/ 
messenger.xul 
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Astuce Nom de fichier oublie ? 


Sur http://lxr.mozilla.org, I'outil pour 
visualiser les sources de Mozilla en ligne, on 
retrouve trois types de recherche : 

• la recherche « texte brut » : pour cher- 
cher du texte dans un fichier. Ceci vous 
servira pour des noms de fonctions 
JavaScript, pour des identifiants d’ele- 
ments XUL... 

• la recherche sur un nom de fichier : 
vous avez oublie I'emplacement de 
navi gator, xul ? C'est avec ce 
champ que vous le retrouverez ; 

• la recherche sur un identifiant : ceci se 
limite au code C++ et aux fichiers de 
definitions d’interface IDL, que nous 
n'aurons pas I'occasion d'aborder dans 
cet ouvrage. Ceci peut servir dans des 
cas tres extremes, sur des obscurs objets 
XPCOM qui ne seraient pas entierement 
definis dans la reference offerte sur le 
site de XUL Planet. 


r v a * j u http://tw.moalla.or9/seamookey/ o GO Pi _ B X 


□ Mozilla Cross-Heference m Le Monde.fr : A la Une □ 

Mozilla Cross-Reference 


This is across referenced display of the Mozilla source code. The sources displayed are these that are currently 
checked In to the mainline of the mozllla.org CVS server : these pages are updated many times a day. so they should 
be pretty close to the lalesl-and-greatest. 

It's possible to search through the entire Mozilla source text or to search for files whose name matches a pattern; or 
to search for the definitions of particular functions, variables, etc. 

The individual files of the source code are formutted on the fly and presented with clickable klenUEierJ. An identifier 
is a macro, typedef, struct, enuin, union, function, function prototype or variable. Clicking on them shows you a 
summary of trow und where they are used. 


The free-tezt search command is implemented using Glimpse , so all the capabilities of Glimpse are available. 
Regular expression searches are especially useful. 


(Don't use awetxrawler to try and download all of these pages; the CGIs will feed you several gigabyte s worth of 
generated HTML!) 

The page's here arc gcncrulcd by the LXR tool . which wic originally written to display the source code of the L inux 
kernel (LXR stands for "Linux Cross ReEereixxO Checkout the main LXR site for more informal ion. 

Thanks to Arne Georg Gleditsch arvi Per Kristian Gjermshus, the airhors of the I .XR tool, for writing It and making 
it available to the world. 


Starting Points: 

LXR 

Roots 

Click here to 
start 

/imwallo 


Use this field to 

through afi the trxt 


File | 

Name 

Search: t ' ind I 

Ujc this field to 
search 

for files by name. 

Identifier \ 

Search: rind 

Use this field to 


Alternative Fichiers JAR 

Vous pouvez egalement dissequer vos archives 
JAR preserves dans le dossier d'installation de 
Mozilla et en extraire les fichiers XUL qui vous 
interessent. LXR a cependant I'avantage d'etre 
tout le temps a jour et possede des fonctions de 
recherche bien utiles... 


Nous allons fonder notre exemple sur la suite Mozilla. Nous voulons 
ajouter, dans la barre de menus Outils, une entree XUL Forum pour que 
l’utilisateur puisse acceder de maniere conventionnelle a la future exten- 
sion. Nous allons done rechercher dans navi gator, xul l’element 
<menubar> qui annoncera l’arrivee du menu qui nous interesse. 

C’est la ligne 145 qui contient l’element interessant : 

145 <menubar id="mai n-menubar" persi st="col lapsed" 

** gri ppytool ti ptext="&menu Bar .tool ti p; "/> 


Mais cette barre de menus est vide ! En effet, navi gator, xul contient 
juste le squelette de l’interface. Le gros du code est reparti sur des over- 
lays, listes en debut de fichier. 

Soit en prenant un overlay au hasard (le premier), soit en effectuant une 
recherche sur menubar id="mai n-menubar", on arrive a trouver le bon 
fichier, celui qui contient les menus : navigatorOverlay .xul, ligne 326. 

Le premier menu est le menu Fichier : 

327 <menu i d="menu_Fi 1 e"> 
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Puis le menu Edition, Affichage, Aller, Favoris... et enfin le menu Outils : 

Ml <menu id="tasksMenu"> 

478 <menupopup id="taskPopup"> 

Nous avons finalement trouve l’identifiant de lelement que nous allons 
« overlayer » : taskPopup. 

<T> 


Culture Les differentes branches du CVS de Mozilla 

Sur http://lxr.mozilla.org, vous retrouverez differentes versions du code source de Mozilla 

(on parle de branches CVS) : 

• SeaMonkey contient le code source le plus a jour, celui qui est utilise dans les versions 
trunk ; 

• Aviary 1 .0.1 est la branche « figee » pour les versions 1 ,0.x de Firefox et de Thunderbird : 
elle contient du code stable qui n'accepte plus que des correctifs de securite et des correc- 
tions de bogues ; 

• Mozilla 1.7 contient aussi la branche stable du code source, pour les versions 1.7.x de 
Mozilla, qui n’accepte elle aussi plus que des correctifs de securite et des corrections de 
bogues ; les autres sont moins interessantes. 

De maniere generale, c'est la branche SeaMonkey que vous utiliserez le plus souvent. 


Gestion multiple : Firefox, Thunderbird, Mozilla 

En fait, nous n’allons pas pouvoir nous contenter d’un seul overlay. 
L’extension devra etre disponible pour Mozilla, Firefox et Thunderbird 
simultanement. Ce serait un vrai cauchemar de gerer trois versions 
concurrentes : nous allons done faire en sorte que les fichiers de XUL 
Forum prennent en compte les trois applications. 


Attention Les differentes versions de XUL Forum 

Lorsque nous arriverons au chapitre 10 concemant LDAP, nous serons obliges d'utiliser 
Mozilla ou Thunderbird, car Firefox ne contient pas les composants XPCOM necessaires. 
En revanche, le plus grand nombre d'utilisateurs voudra tester I'extension via Firefox ou 
Mozilla et sans LDAP. Dernier changement, le widget XBL vu au chapitre 1 1 n'est valable 
que pour Gecko 1 .8. On aura done : 

• la version finale des sources du livre : LDAP active, compatible Thunderbird 1.5/Mozilla 
1 . 8 ; 

• la version finale modifiee, sans LDAP, compatible Firefox 1 .5 et Mozilla 1 .8, disponible 
sur le site xulforum.org, avec son forum de test. 

Le plus simple est de prevoir directement I'installation dans Firefox, Thunderbird ou 
Mozilla, ainsi, vous serez libre ou non de suivre le chapitre 10 I 
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La suite Mozilla 

Contrairement a Firefox, la barre d’outils de la suite Mozilla n’est pas 
personnalisable : on ne peut changer ni son contenu, ni l’ordre des bou- 
tons qu’elle propose. Nous n’allons done pas imposer a l’utilisateur un 
bouton XUL Forum : il vaut mieux se contenter dune entree dans le 
menu Outils, qui sera plus discrete. 


content/ mozilla-overlay.xul 

<?xml version="1.0" ?> 

<?xml -styl esheet href=" chrome ://xul forum/ski n/overl ay . css" 
type="text/css" ?> 

<overlay id="xf-messenger-overlay" xml ns=" http://www.mozi lla.org/ 
** keymaster/gatekeeper/there . i s . onl y . xul "> 

<menupopup id="taskPopup"> 

<menuitem label="XUL Forum" 

oncommand="open('chrome://xulforum/content' , null , 

** 'toolbars: no, statusbar: no');" /> 

</tnenupopup> 

</overlay> 


Le code est tres simple : il se contente d’ajouter une entree dans le menu 
Outils dont nous avons trouve l’identifiant auparavant. Ceci fonctionne 
comme un overlay normal, sauf que le fichier modifie releve du cadre du 
navigateur et pas de notre extension. 


A File Edit View Go Bookmarks 

. a o a a f 

A -5i Home QBookmarks ^ mozil 


lools Window Help 


Search the Web Ctrl+Shift+F 
Iranslate Page 
Cookie Manager 
image Manager 


Popup Manager 

► 

Form Manager 

► 

Password Manager 

► 

Download Manager 


Web Development 

► 

Switch Profile... 

XUL Forum 


Figure 9-1 


C’est bien le fichier navi gator/content/navi gator, xul sur lequel on 
agit : c’est celui qui possede la balise <menubar i d="mai n-menu"> qui est a 
l’origine du <menupopup>. Il faut travailler sur le fichier original : notre 
overlay ne peut pas s’appliquer a navigatorOverlay .xul, qui est deja lui- 
meme un overlay. 
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Le navigateur Firefox 

En revanche, pour Firefox, la barre d’outils est personnalisable. II y aura 
done deux fichiers XUL a modifier : le fichier principal du navigateur 
(qui contiendra le bouton dans la barre d’outils) et la fenetre permettant 
de choisir quels boutons aj outer ou enlever. Ici il faudra faire appel a 
XUL et a CSS. XUL ajoutera le bouton et CSS specifiera des attributs 
essentiels : image a utiliser, changement lorsque la souris survole le 
bouton, etc. 


CULTURE Element tool barpal ette 

II remplace (element tool bar et permet, avec 
beaucoup de JavaScript et de composants 
XPCOM pour le glisser/deposer, de proposer une 
personnalisation de la barre d'outils de Firefox 
et Thunderbird a I'utilisateur. 


Le code XUL servant a I’overlay pour Firefox 

<?xml versi on="l . 0" ?> 

<?xml -stylesheet h ref =" chrome ://xul forum/ski n/overl ay. css" 
type="text/css" ?> 

<overl ay id="xf-messenger-overl ay" 

xml ns=" http://www.mozi 1 la.org/keymaster/gatekeeper/ 

** there. is. only. xul"> 

<tool barpal ette i d="BrowserTool bar Pal ette"> 

<tool barbutton id="xf-tool bar-bouton" 

class="tool barbutton-1" label="XUL Forum" 
title="XUL Forum" 

oncl i ck="wi ndow. open ( 1 chrome : //xul forum/ content/ 1 , 

** 'XUL Forum', ' tool bars : no , statusbar : no " 
tooltip="XUL Forum" type="button" /> 

</tool barpal ette> 

cnienupopup id="menu_Tool sPopup"> 

<menuitem label="XUL Forum" 

oncommand="open('chrome://xulforum/content' , null , 

** 'toolbars: no, statusbar: no');" /> 

</menupopup> 

</overl ay> 

L’element tool barbutton a deja ete vu lorsque nous avons construit 
l’interface et nous allons appliquer le meme principe que dans les chapi- 
tres precedents : nous allons caracteriser ce bouton grace au CSS de la 
feuille de style specifiee dans le prologue XML de l’overlay. II possede 
deja des attributs par defaut car nous l’avons fait appartenir a la classe 
CSS tool barbutton-1, qui fixe des attributs standards pour les boutons 
de la barre d’outils : il ne reste plus qu’a preciser les images. 


Le CSS utilise pour I’overlay 

/* styles pour la barre d'outils */ 

#xf-tool bar-bouton { 

-moz-image-region : rect(Opx 24px 24px Opx) ; 

/* rect() a ete defini au chapitre 6 */ 

1 i st-styl e-i mage : url ("chrome : //xul forum/skin/bouton . png") ; 
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Figure 9-2 

L'image utilisee pour les boutons 


#xf-tool bar-bouton : hover { 

-moz-image-region: rect(24px 24px 48px Opx) ; 

} 

toolbar[iconsize="small "] #xf-tool bar-bouton { 
-moz-image-region: rect(0px 16px 16px Opx); 
list-style-image: 

url ("chrome : //xul forum/ski n/boutonpeti t . png") ; 

} 

toolbar[iconsize="small "] #xf-tool bar-bouton : hover { 
-moz-image-region: rect(16px 16px 32px Opx); 

} 

#palette-box #xf-tool bar-bouton . tool barbutton-text { 
display: none; 

} 

Nous utilisons deux fichiers image : un qui sert lorsque l’option Petites 
icones est cochee et l’autre en temps normal, lorsque les icones sont a une 
taille ordinaire. 

Le selecteur utilise pour les images en petite taille, lorsqu’il est valide, 
ecrasera celui pour les images en grande taille, car il est place plus haut 
dans la cascade CSS. Ceci evite d’utiliser un selecteur supplementaire : 

tool bar [i consize="l arge"] #xf-tool bar- bouton . 

Le selecteur pour le mode Small icons est active lorsque notre bouton est 
contenu dans une barre d’outils (element toolbar) qui porte l’attribut 
i consi ze="smal 1 " (specific dynamiquement lorsqu’on coche la case 
appropriee). 

Enfin il y a un autre fichier a remplir, palette-overlay .xul. Dans ce 
fichier qui « overlaye » customizeToolbar.xul, nous plains encore une 
fois notre element toolbarbutton (il apparait de nouveau dans l’ecran de 
personnalisation) et nous specifions aussi la feuille de style de l’overlay, 
pour avoir bien sur la bonne icone sur le bouton. 

Le dernier selecteur sert pour cet ecran de personnalisation et permet 
d’eviter que le texte XUL Forum ne soit affiche deux fois. En effet, dans 
customizeToolbar.xul, le nom du bouton est deja affiche. 

Or #xf-tool bar-bouton est un conteneur qui contient une image et du 
texte en dessous (comme les boutons de la barre d’outils de XUL forum, 
qui affichent image et texte). Il faut done masquer obligatoirement le 
texte contenu dans le bouton pour que seul l’intitule defini par 
customizeToolbar.xul apparaisse. 
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Le client mail Thunderbird 

Le principe est le meme que pour Firefox, sauf que les attributs id 
changent : le menu pop-up porte l’id taskPopup et la palette 
Mai 1 Tool bar Pal ette. 

En ce qui concerne le fichier palette-overlay .xul , comme Firefox et 
Thunderbird possedent tous les deux le fichier customizeToolbar.xul, 
au meme emplacement, on peut placer les deux overlays relatifs aux deux 
elements tool barpal ette dans le meme fichier. Autrement dit, le fichier 
palette-overlay. xul contiendra : 


II est possible de « melanger » des overlays 

<too1 barpal ette i d="BrowserToo1 barPal ette"> 

tout ce qui sera pris en compte 
dans le cas d'une extension Firefox 

</too1 barpal ette> 

<too1 barpal ette i d="Mai ITool barPal ette"> 
cette f oi s , code pour Thunderbird 
</too1 barpal ette> 

Ainsi, que notre extension soit installee pour Firefox, Mozilla ou 
Thunderbird, les bons overlays seront a chaque fois pris en compte et si le 
fichier n’existe pas ou si l’id ne correspond a rien, le contenu sera simple- 
ment ignore. 
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Dans le cas de Firefox, tout le contenu des fichiers mozilla-overlay .xul 
et messenger, xul sera ignore, car les deux overlays portent sur des fichiers 
qui n’existent pas dans Firefox: navi gator. xul et messenger. xul. Et la 
tool barpal ette portant l’id Mail sera elle aussi ignoree, car aucun ele- 
ment de Firefox portant le meme i d ne pourra integrer son contenu. 


Utilisation des preferences 

Une fonctionnalite agreable pour l’utilisateur consiste a se rappeler des 
dernieres informations qu’il a entrees : dernier fichier de configuration, 
dernier nom d’utilisateur... ceci se fait grace a un composant XPCOM 
offrant l’acces aux preferences. 


Astuce Debogage des preferences 

Pour voir en direct les modifications des prefe- 
rences et ainsi tester vos scripts, ou pour tout sim- 
plement voir quelles sont les fonctionnalites par 
defaut que vous avez modifiees, I’URL 
about:config sera tres utile. Eile vous permettra 
meme de modifier certaines options de configura- 
tion avancees. Une liste assez complete se trouve 
sur le wiki de MozillaZine. 

► http://kb.mozillazine.org/ 
Firefoxj_FAQs_:_About:config_Entries 


Presentation 

Les principales operations sur les preferences se feront a l’aide du com- 
posant @mozflla.org/preferences-service;l et de son interface 
nsIPrefServi ce. On pourra ainsi definir une branche des preferences, par 
exemple la branche extensions, xul forum. Cette convention n’est bien 
sur pas obhgatoire, d’autres extensions utiliseront par exemple la branche 
nom_de_l_extensi on . nom_de_l a_p reference. 

Les preferences peuvent contenir trois types de donnees : des entiers, des 
booleens (vrai ou faux) et des chaines. Nous stockerons les parametres 
suivants (tous precedes par extensions, xul forum.) : 

• derniereConfig, chaine : l’adresse du dernier fichier de configuration 
utilise. 

• dernierUti 1 i sateur, chaine : la derniere valeur entree a l’identification. 

• enregi strerlnfos, booleen: pour savoir s’il faut continuer ou non 
d’enregistrer les dernieres valeurs pour les deux parametres precedents. 

• plusDemander, booleen : pour determiner si Ton continue de poser la 
question a l’utilisateur via une boite modale : Voulez-vous enregistrer 
ces parametres ? OuilNon avec une case a cocher Ne plus me poser la ques- 
tion. 

• derniereVi si te . http: //adressedufi chi erdeconfi gu rati on ... , 
entier : un timestamp representant la derniere visite sur un forum, le 
forum etant identifie par le fichier de configuration qui lui correspond. 
Ceci permettra a PHP, lors de la creation du fichier RDF, de placer 
l’attribut « nonlu » sur les sujets plus recents que la derniere visite. 
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B.A. BA Unix timestamp 

Dans le monde Unix, on stocke les dates des fichiers non pas sous forme de chaTne 
« Samedi 30 avril 2005 », mais sous forme d'entiers, appeles timestamp (on traduirait 
« timbre temps »). Ces entiers represented le nombre de secondes ecoulees entre la crea- 
tion d'Unix (fixee par convention au premier janvier 1970) et la date representee. 
L'utilisation de ce format a plusieurs avantages : 

• une place moindre : une chaine est plus longue a Stocker ; 

• une interoperabilite maximale : il est tres simple d'echanger des nombres entre deux 
langages, dans notre cas entre JavaScript cote client et PHP cote serveur et ensuite de 
les transformer en chaTne avec des fonctions de traitement, en PHP ou en JavaScript ; 

• il n'y a aucun probleme d'heure locale ou de DST ( Daylight Saving Times). 

La fonction getTimeO de I'objet Date en JavaScript retoume le nombre de milli- 
secondes, d’ou la division supplementaire par 1000. 


Les fonctions XPCOM essentielles 

Les fonctions de l’interface nsIPrefServi ce que nous utiliserons sont au 
nombre de six : 

• setBool Pref ("nom de la preference", vrai ou faux) et 
getBool Pref ("nom de la preference"). 

• getCharPref () et setCharPref () qui fonctionnent de la meme 
maniere pour les chaines. 

• getlntPrefO et setlntPref () , leurs homologues pour les entiers. 

Nous aurons aussi besoin dune autre fonction : getPrefType("nomPref"), 
pour connaitre le type (entier, chaine ou booleen) dune entree dans la liste 
des preferences. Enfm, pour analyser les resultats fournis par 
getPrefTypeO, nous aurons besoin de trois constantes fournies par l’inter- 
face nsIPrefBranch : PREF_INT, PREF_STRING, PREF_B00L. 

Le code de XUL Forum 

Pour lire les preferences, nous utilisons une fonction facile a faire evo- 
luer. Elle se charge d’abord d’obtenir le service nsIPrefServi ce pour la 
branche extensions. xul forum., ce qui evite d’avoir a retaper le prefixe a 
chaque fois. Une seconde variable obtient l’interface nsIPrefBranch, 
pour les traitements ulterieurs. Ensuite, un objet contenant les valeurs 
par defaut des preferences est cree. On parcourt I’objet et, pour chaque 
cle, on regarde quel est le type de donnees qui lui correspond dans la 
table des preferences. On adapte la fonction a appeler selon le type de 
preference trouve et on modifie I’objet de depart en consequence. Une 
fois toutes les variables membres de I’objet remplies avec les valeurs 
tirees des preferences, on peut retourner I’objet qui contient maintenant 
les valeurs contenues dans les preferences. 
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Figure 9-4 

La fonction servant a 
charger les preferences 



Pour la fonction d’enregistrement, le principe est a peu de choses pres le 
meme : on fournit cette fois-ci un objet a la fonction et elle parcourt les 
variables de cet objet. Pour chaque variable, elle en determine le type de 
donnees JavaScript — number, boolean ou string — et adapte la fonction 
set . . . Pref O a appeler. 


Enregistrement « dynamique » des preferences 

function enregi strerPrefs(pPrefs) { 

var service = Components. classes[ 

"@mozi 1 la.org/preferences-servi ce ; 1"] 

. getServi ce (Components . i nterfaces . nsIPrefServi ce) 
. get B ranch ("exten si ons .xul forum . ") ; 

var branche = Components. classes[ 

"@mozi 1 la.org/preferences-servi ce ; 1"] 

. getServi ce (Components . i nterfaces . ns I Pref Branch) ; 
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for (p in pPrefs) { 

switch (typeof pPrefs[p]) { 
case "string": 

servi ce . setCharPref (p , pPrefs[p]) ; 
break; 

case "number": 

service. setlntPref (p, pPrefs[p]) ; 
break; 

case "boolean": 

servi ce . setBool Pref (p , pPrefs[p]) ; 
break; 

} 

} 

} 

Ainsi, on pourra obtenir d’un coup les preferences de XUL Forum : 

var o = chargerPreferencesO ; 
dump(o . derni erUti 1 i sateur) ; 
dump(o . derni ereConfi g) ; 


Culture typeof 

typeof est, au meme titre que 
instanceof, une construction de langage. 
L'utilisation de parentheses comme pour une 
fonction est done facultative. 


Et pour les enregistrer, on cree un objet a la volee : 

enregi strerPreferences( { 

derni erUti 1 i sateur : "Jonathan", 

derni erConfi g : "http://localhost/config.xml" } ); 

Application a (’identification 

II faut d’abord commencer par charger les parametres. Comme toujours, 
nous utiliserons la fonction initialisation : 


Integration des preferences au code de XUL Forum 

var gPrefs = nui 1 ; 

/* initialisation */ 
function initialisation () { 
gPrefs = chargerPrefs() ; 
if (gPrefs .derniereConfig != null) 

document .getE1ementById("xf-ident-opt-confi g") . 

setAttri bute("va1 ue" , gPrefs . derni ereConfi g) ; 

if (gPrefs .dernierUtil isateur != null) 

document .getE1ementById("xf-ident-i dent_nom") . 

setAttri bute("va1 ue" , gPrefs . derni erUti 1 i sateur) ; 


163 


www.frenchpdf.com 


- Une integration au coeur de 


Les Cahiers du programmeur 


X 


Ici, on pre-remplit avec les dernieres valeurs stockees dans les prefe- 
rences les champs Utilisateur et URL du fichier de configuration. 

La variable globale gPrefs nous resservira au moment de valider le for- 
mulaire d’identification. On pourra done poser la question a l’utilisateur, 
s’il n’a pas specific auparavant qu’il ne voulait plus qu’on lui demande : 


Figure 9-5 

La boite de dialogue modale 
qui s'affiche apres I'identification 



Nous utiliserons un composant XPCOM pour proposer une boite de 
dialogue standard. 


Function roontrerEfctionsO { 


+ — 7 lines: dump (" Ilf fichage des options avancees\n"); 


jar gPrefs = null; 

/* initialisation */ 

Function initialisation 0 { 


auiiaf 

F 


Prefs = chargerPrefsO; 


Figure 9-6 

Le code XPCOM utilise pour 
poser la question a I'utilisateur 


f* pour valider le formulaire et passer a la page suivante */ 

Function validerO { 
var r; 
var c; 

if (! gPrefs. plusDemander) { 

var prompt = Components. classes["@mozi lla.org/embedcomp/prompt 
-serv i ce ; 1 "]. getServ i ce ( Components . interfaces. ns I PromptServ i ce ) ; 

c = { value; false }; 

r = prompt.conf irmCheck( window, "Enregistrer", "Enregistrer le 
s parametres par defaut ?", "Ne plus me poser la question", c); 

} 

11,17 162 


L’objet c represente l’etat initial de la case a cocher. II est modifie apres la 
fermeture de la boite pour symboHser Faction de I’utilisateur : si la case a 
ete cochee, c. value vaut true. La variable r represente quant a elle la 
reponse de I’utilisateur : vrai s’il a clique OK, faux s’il a annule. 

On adaptera ensuite le traitement et la modification des preferences au 
cas par cas : faut-il demander la prochaine fois ? Faut-il enregistrer les 
parametres, laisser les valeurs precedentes, ou remplir avec des valeurs 
par defaut ? Le traitement est long et ne presente pas d’interet 
particulier : vous pourrez le retrouver dans les sources de XUL Forum, 
fichier content/javascri pt/i denti fi cati on . js. 
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Alternative L'element <dialog> 

II existe un type de fenetre special, l'element <di al og> qui permet de reproduire le com- 
portement obtenu avec le composant XPCOM. Comme XUL Forum est une extension, il 
est plus simple de suivre la solution XPCOM. L'element <dialog> pourra etre reutilise 
pour une boite A propos de... par exemple. 

► http://www.xulplanet.com/tutorials/xultu/dialogs.html 


Autres techniques utiles 

Raccourcis clavier 

Maintenant que notre application va etre principalement lancee seule, 
c’est-a-dire non plus dans un onglet du navigateur, nous pouvons lui 
associer des raccourcis clavier. Auparavant, nous etions genes car le navi- 
gateur avait lui aussi ses propres raccourcis qui pouvaient entrer en con- 
flit avec ceux de XUL Forum (comme Ctrl + R qui recharge la page dans 
Firefox). 

Nous pourrons ainsi rajouter deux raccourcis basiques : Echap pour 
quitter l’application et Ctrl + R, pour forcer le rechargement dune 
source de donnees. 

A ajouter dans un fichier XUL, pour lui associer des raccourcis clavier 

<keyset i d="xf-raccourci s"> 

<key id="quitter-cle" keycode="VK_ESCAPE" 
oncommand="window.closeO /> 

<key id=" raf rai chi r-cl e" key="R" modi fiers="contro1 " 
oncommand="mettreA]ourSourceRDF() /> 

</keyset> 

Le premier raccourci clavier se fait a l’aide dune touche speciale (non 
alphabetique), la touche Echap, ce qui explique l’utilisation de l’attribut 
keycode. VK signifie Virtual Key, touche virtuelle en franfais. II en existe 
beaucoup d’autres, la liste est disponible dans le fichier 
nsIDOMKeyEvent . i dl . 


► http://lxr.mozilla.org/seamonkey/source/dom/public/idl/events/ 
nslDOMKeyEvent.idl#45 

N'oubliez pas de supprimer les prefixes DOM„ avant d'utiliser ce code dans votre fichier XUL ! 
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Le second raccourci se fait a l’aide dune touche alphabetique, la touche 
R : c’est l’attribut le plus simple, key, qui est mis en jeu. L’attribut 
modifiers indique qu’en plus de la touche R, il faut presser une touche 
speciale en meme temps : la touche Controle ou Ctrl sur la plupart des 
claviers. Cependant, sur des Macintosh, le raccourci peut etre different 
(par exemple Pomme + R) et la valeur control ne s’applique pas. On uti- 
lisera done accel, qui garantit le choix de la touche speciale en fonction 
de la plate-forme et affichera Ctrl + R sous Windows ou Linux. 

Nous pourrons placer les differents raccourcis dans l’overlay contenant 
les menus et placer deux elements vides <keyset id="xf-raccourcis"> 
dans xulforum.xul et index. xul. 

XUL permet meme d’associer un raccourci clavier a une entree de 
menu : 

cmenuitem key="qui tter-cl e" 

1abe1="&index.menu_fichier_quitter; " 
oncommand="wi ndow . cl ose () ; " /> 

Ceci fera apparaitre la combinaison de touches necessaire a droite de 
l’entree de menu. 


Figure 9-7 

Le raccourci clavier pour 
quitter apparaTt a droite 



Fic hier ] Connexion Configuration 
Quitter Esc 


Alternatives Plusieurs « modifieurs » 

On peut specifier plusieurs valeurs separees par un espace dans I'attribut 
modi fiers=" 

Par exemple : 

modi fi ers="contro1 alt" 

obligera I'utilisateur a presser simultanement Ctrl, Alt et la touche specifiee par key=" " 
ou keycode="". 

Les differentes valeurs possibles sont : control, alt (option pour un Mac), meta 
(touche Commande sur un Mac), shi ft, accel (detaille ci-contre). 
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En resume... 

Dans ce chapitre nous avons totalement « fondu » notre extension dans 
Mozilla : echanges de donnees extension/navigateur via les preferences, 
fusion des fichiers du navigateur avec les ajouts de notre extension, rac- 
courcis clavier... 

Le chapitre suivant sera consacre a LDAP : integration d’un service 
d’annuaire deja existant dans le processus d’identification de l’utilisateur 
XUL Forum. 
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JavaScript version « pro » : LDAP 


II est temps de se debarrasser une fois pour toutes de l’image de 
langage « simpliste » qui colle a JavaScript : dans ce chapitre, 
nous ferons taire les critiques en montrant qu’il est possible 
d’effectuer des taches plus qu’ardues avec ce langage. 


SOMMAIRE 

► LDAP ? Presentation et 
utilisation dans le cadre 
de I'application 

► L'identification 

► La liste des connectes 

► Les informations pour 
un connecte 

MOTS-CLES 

► Proxy XPCOM 

► Listeners 

► Threads asynchrones 
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Attention Firefox et LDAP 

Les composants XPCOM sont indus uniquement 
dans la suite Mozilla et Thunderbird. Vous 
devrez done changer de plate-forme de develop- 
pement si vous choisissez de tester LDAP alors 
que vous utilisiez auparavant Firefox. La proce- 
dure d'enregistrement de I'extension pour 
Thunderbird 1.0 est exactement celle decrite au 
chapitre 4. Pour Thunderbird 1 .5, elle est decrite 
en annexe A. 


Outils DOM Inspector 

Pour Thunderbird, le DOM Inspector est a tele- 
charger sous forme d'extension, si vous avez 
besoin de I'utiliser. 

> http://www.extensionsmirror.nl/ 
index.php?showtopic=2601 


Dans ce chapitre, peut-etre un peu complexe, nous montrerons une uti- 
lisation inhabituelle et neanmoins utile de JavaScript : son interaction 
avec le service d’annuaire LDAP. LDAP nous servira de mecanisme 
d’identification pour l’utilisateur : dans le monde Unix, l’identification 
Samba, Apache ou meme le login d’un utilisateur peuvent se faire grace a 
LDAP (voir l’encadre ci-contre). L’identification XUL Forum se fera de 
la meme maniere. Ensuite, nous prolongerons l’interaction avec LDAP 
en tirant parti de sa deuxieme fonction, certainement la plus largement 
utilisee : l’annuaire. Nous pourrons ainsi, apres avoir ouvert l’application 
pour l’utilisateur enregistre, lui proposer une liste des membres, dont le 
contenu sera alimente par le serveur LDAP. 

Ce chapitre tres technique ne doit pas etre pertpi comme une obligation 
absolue : si vous n’etes pas particulierement interesse par LDAP, si vous 
ne vous sentez pas d’affinite immense avec les composants XPCOM, si 
l’installation d’un serveur LDAP ne vous tente pas necessairement, ne 
vous sentez pas oblige de lire ce chapitre. LDAP ne sera d’ailleurs pas uti- 
lise dans la version distribute sur le site du projet, la version fonctionnelle 
etant uniquement fondee sur MySQL et PHP. En revanche, si vous avez 
deja eu l’occasion d’utihser ce service d’annuaire, que ce soit en entreprise 
ou pour votre curiosite personnels, si vous avez envie de decouvrir 
LDAP, si vous voulez voir un cas d’utilisation de JavaScript complexe, 
alors ce chapitre est fait pour vous ! 


B.A.-BA LDAP et Mozilla 

Le lien est etroit entre LDAP et Mozilla. Le projet Mozilla propose en effet un SDK (ou 
Software Development Kit), qui propose une bibliotheque pour acceder a un serveur LDAP. 
Ce SDK, heritier des efforts portant sur le service d’annuaire, appele Directory Server de 
Netscape, est utilise par exemple dans le projet OpenOffice, ou peut servir de support pour 
I'extension LDAP de PHP. Pour XUL Forum, nous utiliserons la version XPCOM de ce SDK, 
qui n'est en fait qu'une interface xpconnect entre JavaScript et les bibliotheques en C. 

► http://www.mozilla.org/directory/ 


Recherches LDAP avec JavaScript et nos 
propres composants XPCOM 

> http://www.xulplanet.com/references/ 

xpcomref/group_LDAP.html Nous allons detailler les differentes etapes necessaires a l’elaboration 

d’une recherche sur notre serveur LDAP. Toujours dans la logique d’une 
separation fonctionnelle du code JavaScript, tout ce qui concerne LDAP 
sera stocke dans content/javascri pt/1 dap . js. Le fichier fera finalement 
150 lignes de code environ. 
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B.A.-BA LDAP... oui mais encore ? 

Nous allons beaucoup parler du fameux LDAP dans ce chapitre : 
autant en faire une presentation immediate. 

LDAP signifie Lightweight Directory Access Protocol ou, en mau- 
vais fran<;ais, Protocole d'acces aux annuaires legers. LDAP definit 
en fait : 

• un protocole, c'est-a-dire la maniere dont doivent communi- 
quer le client et le serveur d'annuaire, la forme sous laquelle se 
presentent leurs messages ; 

• des modeles : comment Stocker les informations et les diffe- 
rents types de donnees, comment les identifier, les ranger, etc. ; 

• des API, c'est-a-dire des bibliotheques offrant des fonctions 
pour communiquer avec le serveur ; 

• LDIF, un format pour I'echange des donnees entre services 
d’annuaires. 

LDAP est con<;u pour stacker de maniere hierarchique beaucoup de 
donnees, mais de petite taille. 


La version actuelle du protocole est LDAP v3. 

Les entrees LDAP suivent des modeles : il existe des modeles pour 
une personne (son nom, sa description, sa photo...), pour un con- 
tact (ajout d'un champ mail) pour un utilisateur de systeme Unix (il 
y aura alors un mot de passe), etc. Ceux-ci sont stockees dans le 
champ objectClass d'une entree. Nos entrees d’utilisateurs 
XUL Forum font partie des classes top, i netOrgPerson et 
person. 

Vous pouvez administrer votre serveur LDAP en ligne de com- 
mande ou en utilisant des outils graphiques comme phpLDAP- 
admin. Si vous desirez approfondir vos connaissances, consultez la 
page de Wikipedia : 

► http://en.wikipedia.org/wiki/LDAP 

ou cet article tres complet de Laurent Mirtain : 

► http://www-sop.inria.fr/semir/personnel/Laurent.Mirtain/ 
ldap-livre.html 
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Figure 10-1 Consultation d’une entree a I'aide du logiciel d'administration phpLDAPadmin 
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Pour les composants XPCOM et les interfaces auxquelles il sera fait 
reference dans la suite du chapitre, la reference se trouve comme toujours 
sur le site de XUL Planet. 


Pour aller plus loin 

Les fichiers de configuration 

Le serveur retenu lors du developpement est 
OpenLDAP, une implementation libre et reconnue 
de ce protocole. Vous pourrez retrouver les details 
de sa mise en oeuvre (fichiers LDIF de base, guides 
utilises, fichiers de configuration slapd.conf) 
sur le site web du projet. 


La structure LDAP de XUL Forum : le DIT 

Nous allons tout d’abord presenter la structure du serveur LDAP utilise 
pour XUL Forum. II est structure de maniere hierarchique : au sommet 
se trouve le noeud racine : ce sera l’organisation XUL Forum, notee 
o=xul forum. Ce type de notation s’appelle un DN (pour Distinguished 
Name) et permet d’identifier un element dans un arbre hierarchique 
LDAP. On definira ensuite plusieurs noeuds fils : ou=utilisateurs (ou 
signifiant organizational unit), ou=visiteurs, ou=admi ni strateurs... Et 
dans chacun de ces groupes, on definira des personnes : uid=jonathan 
(uid comme user id) par exemple. Comme Jonathan pourra etre integre a 
la fois dans les utilisateurs et les administrateurs, on precisera 
uid=jonathan,ou=administrateurs,o=xulforum pour etre certain de 
manipuler la bonne entree. Le schema ci-dessous recapitule cette 
structure : il s’appelle le Directory Information Tree ou DIT. 


Figure 10-2 

Le DIT pour le serveur 
LDAP de XUL Forum 



Alternatives Base de donnees dassique MySQL (ou autre) 

II aurait bien sur ete possible d'utiliser un mecanisme d'identification a I'aide du celebre 
couple PHP/MySQL. On peut en effet reprocher a LDAP une specificite trap grande : en 
dehors d'un milieu intranet d'entreprise, qui utilise LDAP pour ses besoins personnels, ou 
meme, qui utilise LDAP dans son forum sur le Net ? 

La solution PHP/MySQL a ete retenue pour la version « fonctionnelle » de XUL Forum, tes- 
table sur le site du projet. Elle n'inclut pas les composants LDAP et se fonde sur des appels 
a des services web, des XMLHttpRequest pour pallier le manque d'utilisations con- 
cretes de LDAP. Le serveur PHP compare les noms d'utilisateurs et les mots de passe 
fournis avec les entrees presentes dans la base de donnees MySQL et renvoie vrai ou faux 
si I'identification a reussi. De meme, la liste des membres sera remplie grace a une source 
RDF geree la encore par PHP. 
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La succession des differentes fonctions 

Nous allons presenter l’enchamement logique des differentes fonctions 
du fichier ldap. js de XUL Forum, pour ensuite nous interesser au con- 
tenu de chacune d’entre elles. Cette approche permettra d’eclaircir pro- 
gressivement une procedure au premier abord complexe. 


Structure globale du fichier content/javascript/ldap.js 

var gLdapFonctions = { }; 

/* le listener pour l'objet nsILDAPConnection*/ 
function gl obal Li stener 0 { } 

/* celui pour l'objet nsILDAPOperation*/ 
function LDAPLi stener 0 { } 

/* la fonction pour servir les files d'attente pour les 
listeners */ 

function obteni rProxy(pObjet , plnterface) { } 

/* pour servir un nouveau nsILDAPOperation tout pret ! */ 
function obteni rOpO { } 

/* la recherche */ 
function chercherO { } 

/* initialisation des variables */ 
function i ni ti al i serLDAP(pDn , pHost) { } 


Pour aller plus loin Code dans LXR 

Nous I'avons souvent souligne, il est crucial de 
trouver un exemple de code pour comprendre 
comment fonctionnent les composants XPCOM. 
Ici, c'est dans LXR que I'on trouve cet exemple. Le 
fichier indique sert a rapatrier des certificats de 
securite pour le gestionnaire de contacts. 

► http://lxr.mozilla.org/seamonkey/source/ 
mailnews/extensions/smime/resources/ 
content/certFetchingStatus.js 


Tout commence avec la fonction initialiserLDAP. Elle prend comme 
argument le DN qui servira de base pour les recherches et l’hote auquel 
le script doit se connecter. Cette fonction se charge done d’initialiser 
toutes les caracteristiques de la connexion au serveur : version du proto- 
cole, tri eventuel sur les resultats renvoyes, etendue de la recherche (uni- 
quement le DN de base choisi, ou bien ses sous-elements par exemple). 

Une fois les parametres choisis correctement, nous lanfons la connexion 
proprement dite. C’est ici que le script adopte un comportement parti- 
culier, different des methodes procedurales que nous avons vues aupara- 
vant. L’operation consistant a rapatrier les resultats dune operation 
LDAP a une duree indeterminee et on ne peut pas se permettre 
d’attendre qu’elle soit achevee pour continuer le script. Si Ton attendait 
la fin de la connexion au serveur (qui peut etre tres longue, suivant les 
aleas du reseau), tout le reste du JavaScript serait fige, notamment l’affi- 
chage. II faut done effectuer une operation asynchrone : les operations 
continueront lorsque les resultats seront arrives et, dans le temps 
d’attente, le script n’est pas bloque. 


173 


www.frenchpdf.com 


10 - JavaScript version « pro » : LDAP 


Les Cahiers du programmeur 


X 


C 6 ovc 


L-bP> P 


Xhl+ioi l»> 




L' skha'-o** tb^Iwrt t) \ LbwLaWwo^- oxLbAfHe^o.at C) 


Figure 10-3 

La succession des differentes operations... 
a reconsulter tout au long de ce chapitre ! 



Coie Rfc S_6vrft.v. 


Nous lanfons done la connexion LDAP et, operation cruciale, nous enre- 
gistrons un listener. Ce listener est un objet dont certaines methodes seront 
appelees a un moment judicieux. Ainsi, lorsque la connexion LDAP aura 
fini son initialisation, une methode du premier listener, gLdapListener, 
sera appelee. Cette methode agira en consequence, d’abord en deman- 
dant l’acces a une operation LDAP (obtenirOpO) et en lanfant ensuite 
cette operation : e’est l’identification. 

C’est alors le second listener qui est appele, lorsque les resultats de 
Fidentification arrivent. Ce listener qui traite les retours des operations 
LDAP analyse le message qui lui est fourni : si c’est le resultat dune 
identification qui arrive, il lance la recherche (c’est la fonction 
chercherO), apres avoir obtenu une autre operation LDAP. 

La recherche est transmise au serveur LDAP, qui l’effectue et renvoie les 
resultats. Une fois ces resultats arrives, c’est toujours le second listener 
qui est mis en oeuvre : il analyse le ou les messages qui lui sont fournis, 
en decomposant les differents constituants du ou des DN trouves lors de 
la recherche. 

Une fonction n’a pas ete abordee : c’est obteni rProxyC). Elle permet en 
fait d’appeler un composant XPCOM specifique qui cree une file 
d’attente vers les listeners. Ainsi, quand les resultats de la recherche arri- 
vent, ils sont mis dans une file d’attente pour etres traites les uns a la 
suite des autres. 
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II faut bien comprendre que toutes ces operations s’effectuent « en parallele » 
du script principal : les retours peuvent ainsi arriver plusieurs secondes apres 
le clic demandant l’identification. II faut done penser l’identification 
differemment : e’est le script ldap qui appellera une fonction 
passerPageSui vante(), uniquement lorsque les resultats de l’identification 
seront arrives. De meme, une fonction rempl i rLi steMembres (tableau des 
infos du membre) sera appelee lorsqu’un resultat de la recherche arrivera. 

Pour ne pas dependre d’un nom de fonction particulier, les fonctions a 
appeler seront stockees sous forme de pointeurs de fonctions dans l’objet 
gLdapFoncti ons, car elles peuvent changer selon que Ton est sur 
identification. js ou forum. js. 


Astuce Les pointeurs de fonction 

Cette terminologie, heritee du langage C, designe en fait une astuce tres simple. En void 
un exemple : 

var f; //le "pointeur de fonction" 
f = alert; 

f("Info de debug"); //info voyante 
f = dump; 

f("Info de debug"); //info discrete 

Ceci permet d'eliminer la specificite du traitement LDAP. Dans notre recherche, la fonction 
a appeler lorsque les resultats de la recherche viennent d'arriver est susceptible de varier. 


[.’initialisation 

Nous pouvons maintenant nous interesser a la procedure d’initialisation. 


Initialisation de la partie LDAP de XUL Forum 

/* initialisation des variables globales */ 
var gLdapConn = Components. classes [ 

"@mozi lla.org/network/ldap- connection;!."] . createlnstance() . 

*+ QueryInterface(Components . interfaces. nsILDAPConnection) ; 0 
var gLdapURL = Components . cl asses [ 

"@mozilla.org/network/ldap-url ;1"] . createlnstance() . 

** QueryInterface(Components . i nterfaces . nsILDAPURL) ; 0 
var gLdapOp; Q 

function i ni ti al i serLDAP(pDn , pHost) { 
dumpC’Debut initialisation gLdapURL\n") ; 

/* parametrage pour l'objet nsILDAPURL */ 
gLdapURL. dn = pDn ; 
gLdapURL . host = pHost; 

gLdapURL. scope = gLdapURL. SCOPE_SUBTREE; 
gLdapURL . addAttri bute("cn") ; 


POURALLER PLUS LOIN 

Similitudes entre JavaScript et C 

Si vous connaissez le C, vous remarquerez que 
dans ce chapitre, beaucoup de code LDAP res- 
semble a du code C. gLdapUrL est une struc- 
ture plutot qu’un objet JavaScript. Les 
parametres count que nous verrons plus loin 
sont des pointeurs vers des entiers plutot que 
des variables JavaScript. De toute evidence, ils 
permettent de faire des boudes for du C et 
non pas des boudes for i n du JavaScript. En 
fait, cette extension LDAP est quasiment une 
version JavaScript de ce qui se fait en C, ce qui 
explique sa complexity par rapport aux traite- 
ments auxquels nous sommes habitues. 
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gLdapURL. addAttribute("uid") ; 

gLdapURL . fi Iter = " (objectCl ass=*) " ; //tous les resultats 
dump("Nous utilisons les parametres fournis : "+pDn+ 

" et "+pHost+"\n") ; 

/* initialisation du nsILDAPConnecti on */ 
gLdapConn . ini t (gLdapURL .ascii Host , gLdapURL . port , 
gLdapURL. options , gLdapURL. dn, 
obtenirProxy(new gl obal Li stener , 

Components . i nterfaces . nsILDAPMessageLi stener) , 
null, gLdapConn .VERSI0N3) ; 


Alternative II n'y a pas que 
XULPIanet.com dans la vie ! 

Un autre site propose de la documentation creee 
automatiquement a partir du code source de 
Mozilla. On y trouve notamment des diagrammes 
montrant les relations entre les differentes inter- 
faces ainsi que les commentaires Doxygen des 
interfaces. Pour LDAP, I’adresse est la suivante : 

► http://unstable.elemental.com/mozilla/ 
build/latest/mozilla/directory/dox/ 
hierarchy.html 


L’objet central, le composant XPCOM sur lequel repose toute notre 
demarche est Omozil la.org/ldap-connecti on ;1 et son interface 
nsILDAPConnecti on. On commence par l’instancier Q, puis on instancie 
aussi un composant implementant l’interface nsILDAPURL©. Ceci ne se 
fait qu’une fois, lorsque le fichier LDAP est inclus depuis le fichier prin- 
cipal (forum. js ou identification, js). On prepare aussi une variable 
globale correspondant a une operation « vide » ©, obtenue ulterieure- 
ment grace a obteni rOp() et pouvant servir pour une identification ou 
une recherche par exemple. gLdapOp est en quelque sorte un objet gene- 
rique pouvant etre utilise a differentes fins. 

Ensuite, on remplit les differents parametres de gLdapURL, parametres sus- 
ceptibles de changer en fonction des cas : hote, DN de base, etc. C’est 
pour cela que ce parametrage est place dans la fonction i ni ti al i serLDAP. 
On ajoute aussi les caracteristiques recherchees dans les entrees (CN et uid 
notamment). 

Une fois que FURL est entierement parametree, on initialise la connexion, 
avec les parametres choisis precedemment. Tous parlent d’eux-memes, 
sauf la fonction obteni rProxy 0 : c’est elle que nous allons detailler dans la 
partie suivante et que nous avons deja mentionnee : elle cree une file 
d’attente vers un composant XPCOM que nous avons instancie. 


Nos propres composants XPCOM en JavaScript : 
listeners 

Les composants 

L’un des parametres qu’accepte la fonction init de Finterface 
nsILDAPConnecti on est un nsILDAPMessageLi stener messageLi stener. 
On pourrait penser au premier abord que c’est un autre composant 
XPCOM qu’il faut instancier, un composant implementant cette interface. 
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Attention Debogage, LDAP et erreurs... 

Les composants LDAP XPCOM sont un petit peu pointilleux quant aux 
parametres qu'on leur fournit. Souvent, des bogues se produisent de 
maniere inexpliquee et se traduisent uniquement par une exception 
obscure qui n'apporte que peu d'informations quant a leur origine. 

Le code propose ici a cependant ete teste et fonctionne. L'ideal est en 
fait de d'abord mettre au point le code recuperable en ligne, puis de le 
modifier ligne par ligne et, a chaque fois, de verifier que tout fonc- 
tionne encore. 

Une autre approche est de verifier d'abord le serveur LDAP (via PHP par 
exemple, qui propose une interface de manipulation plus simple, ou les 
outils en ligne de commande s'ils ne vous font pas peur), car la configu- 
ration du serveur peut se reveler parfois difficile, puis de s'attaquer a la 
version JavaScript. Ce langage tiers peut vous aider a trouver d'even- 
tuelles erreurs de fonctionnement provenant du serveur, plus difficiles a 
identifier en JavaScript !... Prudence done ! 


Mais comment personnaliser sa reaction aux messages qui lui sont 
transmis ? D’ailleurs il n’existe pas de composant @mozi 11a. org/1 dap- 
message-listener;!, mais juste des composants de traitement (pour le 
carnet d’adresses par exemple), qui implementent cette interface. C’est 
done un composant XPCOM que nous allons creer, qui implementera 
trois methodes : l’une, necessaire a tout composant, est bien sur 
Querylnterface. Les deux autres sont onLDAPInit et onLDAPMessage et 
sont requises par nsILDAPMessageLi stener. 


Nos composants XPCOM implementant nsILDAPMessageListener 

/* le listener pour l'objet nsILDAPConnection*/ 
function gl obal Li stener 0 { } 

gl obal Li stener . prototype .Querylnterface = function(iid) { 

if (iid.equalsfComponents. interfaces. nsISupports) || 

i id. equal s (Components . interfaces. nsILDAPMessageListener)) 

return this; Q 
el se 

Components . returnCode = 

Components . resul ts . NS_ERROR_NO_INTERFACE ; 
return nul 1 ; Q 

} 

gl obal Li stener . prototype .onLDAPInit = function(pConn, pStatus) 

{ 

. . . traitement . . . Q 

} 

gl obal Li stener . prototype .onLDAPMessage = function(pMsg) { } 

// non utilise Q 
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/* celui pour l'objet nsILDAPOperati on*/ 
function LDAPListener () { } 

LDAPLi stener . prototype . Querylnterface = function(i id) { 
if (iid.equa1s(Components. interfaces. nsISupports) || 

i i d . equal s (Components . i nter faces . nsILDAPMessageLi stener)) 
return this; 
el se 

Components . returnCode = 

Components .results. NS_ERROR_NO_INTERFACE ; 
return nul 1 ; 

} 

LDAPListener. prototype. onLDAPInit = function(a, b) { } 

// non utilise 0 

LDAPListener. prototype. onLDAPMessage = function (pMsg) { 
switch (pMsg.type) { 

. . . traitement . . . Q 

} 

} 

On cree deux composants separes : le premier serf pour la connexion et 
le second pour les messages renvoyes par le serveur. 

global Li stener doit d’abord repondre a la fonction Querylnstance(). II 
implemente l’interface de base nsISupports, que chaque composant 
XPCOM doit implementer et l’interface nsILDAPMessageLi stener. 
Ainsi, si c’est l’une des deux interfaces qui est demandee lors de l’instan- 
ciation, on renvoie un nouvel objet Q. Si il y a meprise et que Mozilla 
demande une interface que n’implemente pas notre composant, on 
signale ceci par une erreur ©. La methode suivante est onLDAPInit Q, 
qui est appelee une fois que la connexion est correctement initialisee ; 
nous verrons son contenu au paragraphe suivant. 


Pour aller plus loin Enregistrer le composant 

Les objets que nous creons remplissent les caracteristiques d'un composant XPCOM 
implementant I'interface nsILDAPMessageLi stener, mais ne sont pas enregistres 
pour autant aupres du navigateur. Toutefois, il serait possible d’enregistrer nos propres 
composants pour ensuite instancier « @xulforum.org/ldap-listener-perso;1 ». Le lien ci- 
dessous vous permettra d'approfondir cette technique, avec notamment la creation de 
I'interface en utilisant IDL. 

C'est la technique utilisee dans I'extension Gmail Notifier par exemple (pour vous signaler 
de nouveaux courriers electroniques sur votre compte Gmail). Un composant est instancie 
(il verifie regulierement I'arrivee de nouveaux courriers), mais une seule fois : un seul com- 
posant est en memoire. Ensuite, pour chaque fenetre, le script demande au composant 
I'etat actuel de la boite. Ceci permet de centraliser les requetes sur le serveur et de syn- 
chroniser I'affichage des differentes fenetres. 

► http://www-igm.univ-mlv.fr/~dr/XPOSE2004/xpcom/composantJs.php 
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La methode onLDAPMessage doit etre implementee, elle est imposee par 
l’interface, mais elle n’est pas utilisee ©. 

Le second composant, LDAPListener, fonctionne de la meme maniere. 
La seule difference avec le premier composant est sa methode 
onLDAPIni t 0 qui n’est pas utilisee (car la connexion est deja initialisee) 
et sa methode onLDAPMessage 0 qui, au contraire, est tres utilisee : c’est 
ici que se fera tout le traitement des messages en provenance du serveur. 

Creation d’une file d’attente 


Les proxy XPCOM pour un objet 

/* la fonction pour servir les files d'attente pour les 
listeners */ 

function obteni rProxy(p0bjet , plnterface) { 

var eqService = Components . cl asses [ 

"@mozi 11a . org/event-queue-servi ce ; 1"] . getServi ce ( 
Components . i nterfaces . nsIEventQueueServi ce) ; 

var uiQueue = eqServi ce . getSpecial EventQueue( 

Components . i nterfaces . nsIEventQueueServi ce . 
UI_THREAD_EVENT_QUEUE) ; Q 

var xpProxy = Components. cl asses [ 

"@mozi 11a . org/xpcomproxy ; 1"] . getServi ce( 

Components . i nterfaces . nsIProxyObjectManager) ; 

return xpProxy .getProxyForObject (uiQueue, plnterface, 
pObjet, 5); 0 //5 = 4 & 1 


http : //I xr .mozi 11a . org/ seamonkey/source/xpcom/proxy/publ i c/ 
nsProxyEvent . h 

#defi ne PROXY_SYNC 0x0001 
// acts just like a function call. 

#defi ne PROXY^SYNC 0x0002 

// fire and forget. This will return immediately and you 
// will lose all return information. 

#defi ne PROXY J\LWAYS 0x0004 

// ignore check to see if the eventQ is on the same thread 
// as the caller, and alway return a proxied object. 

*/ 

} 


Cette fonction sert d’abord a obtenir 0 un type de file d’attente special, 
puis a instancier un proxy XPCOM 0 , envoyant vers la file d’attente 
obtenue plus haut les objets (parametre 3) implementant l’interface 
passee en deuxieme parametre. Le dernier parametre trouve son explica- 
tion en cherchant directement dans les fichiers headers. 
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Quel est l’interet d’utiliser un proxy XPCOM pour ce composant ? II 
faut en fait savoir que la plupart des composants Mozilla n’ont pas ete 
corpus de maniere thread-safe. Autrement dit, ils ont ete penses comme 
si un seul processus devait y acceder au meme moment. Si Ton n’utilisait 
pas ce event queue , si deux messages arrivaient au meme moment (pro- 
blemes de reseau), on aurait de la memoire allouee/rendue par des 
threads differents, d’oii des problemes evidents. II faut done mettre une 
file d’attente, pour eviter que des messages n’arrivent en meme temps. 

Obtention d’une operation 

Sous ce titre un peu abstrait se cache en fait une realite des composants 
LDAP : avant de demander quoi que ce soit au serveur, il faut obtenir 
une operation, comme nous l’avons mentionne plus haut. 

II faut initialiser les operations LDAP avant de « parler » au serveur 

function obtenirOpO { 

gLdapOp = Components . cl asses [ 

"@mozi 11a . org/network/1 dap-operati on ; 1"] . createlnstanceO . 
QueryInterface(Components . interfaces. nsILDAPOperation) ; 

gLdapOp. init(gLdapConn, obteni rProxy (new LDAPLi stener , 
Components . i nterfaces . nsILDAPMessageLi stener) , null) ; 

} 

Le code est peut-etre plus parlant que pour les proxies XPCOM : on 
instancie l’operation et on l’initialise en lui fournissant dans l’ordre : 

• la connexion a laquelle elle se rapporte ; 

• l’objet implementant nsILDAPMessageLi stener, qui servira a traiter 
les messages resultant de cette operation ; 

• un eventuel objet pouvant servir a la fermeture de l’operation : nous 
n’en aurons pas l’utilite. 


Identification avec un simple bind 

Maintenant que la structure de base est en place, nous pouvons enrichir 
ce squelette LDAP avec quelques traitements. Le premier sera l’identifi- 
cation. 

global Li stener . prototype . onLDAPInit = function(pConn, pStatus) 

{ 

dump("\n ** Bound as "+pConn . bi ndName+"\n") ; 
obteni rOp() ; 

gLdapOp. simpl eBind(gLdapFoncti ons . pass) ; 

} 
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Le premier listener, se rapportant a la connexion LDAP, verra sa 
methode onLDAPIni t appelee apres l’initialisation. II reagit en affichant le 
DN de base fourni (par exemple uid=jonathan,ou=utilisateurs, 
o=xul forum) sur la console et en demandant une identification pour ce 
meme DN. Vous remarquerez que le mot de passe est stocke dans 
gLdapFoncti ons, car il est fourni depuis « l’exterieur » de 1 dap . js : depuis 
xulforum.xul ou index. xul. 

C’est alors le second listener qui entre en jeu, puisque les resultats dune 
operation (comme l’identification) sont traites par LDAPListener. 


Reactions lorsque la reponse de I’identification arrive 

LDAPListener. prototype. onLDAPMessage = function (pMsg) { 
switch (pMsg.type) { 

case Components . i nterfaces . nsILDAPMessage .RES_BIND : 

dump("\n BIND\n") ; 

var r = pMsg . errorCode == 

Components . i nterfaces . nsILDAPErrors . SUCCESS ; 
dump(" Succes : "+r+"\n") ; 

if (gLdapFonctions . apresldenti fi cati on != null && r) 
gLdapFonctions .apresIdentification() ; 
else if (gLdapFonctions. apresldentification != null && ! r) 
ajouterErreur(gStringBundle.getString("LDAPInval ide")) ; 
chercherO ; 
break; 


On envisage ici le traitement qui arrive lorsque le message est de type 
RES_BIND c’est-a-dire un retour d’identification. On verifie d’abord le 
succes de l’operation : identification reussie ou non. Ensuite, si le script 
principal a defini une fonction a appeler apres une identification, on 
appelle cette fonction s’il y a eu succes, on signale l’erreur s’il y a eu 
echec. La fonction appelee pourra ensuite decider de passer a la page 
suivante si Ton est dans xulforum.xul. 


Pour aller plus loin DocC 

Si vous voulez pousser (experience LDAP encore 
plus loin, la documentation du C SDK est a votre 
disposition, sur le site de Mozilla : 

► http://www.mozilla.org/directory/ 
csdk-docs/ 


Attention Bind anonyme 

('identification LDAP ne se fera que dans la premiere page de XUL Forum, la page d'iden- 
tification. Dans la seconde, c'est-a-dire i ndex . xul , nous nous connecterons de maniere 
anonyme au serveur LDAP (il n'y aura done pas d’identification) pour seulement effectuer 
un rapatriement de donnees. 

Autrement dit, pour xul forum, xul, seule la variable : 

gFoncti ons . apresldenti fi cati on () 
sera definie ; pour i ndex . xul , seule : 

gFoncti ons . apresRechercheO 
sera utilisee. 


181 


www.frenchpdf.com 


10 - JavaScript version « pro » : LDAP 



Les Cahiers du programmeur 


Obtenir la liste des membres 

Analyse du cote LDAP 

La deuxieme utilisation consiste a effectuer une recherche, sur tous les 
utilisateurs de XUL Forum par exemple. Le principe est le meme que 
pour l’identification : d’abord, obtenir une operation. Ensuite, analyser 
les messages qui arrivent via LDAPLi stener. 

L’appel a la fonction chercher dans le code precedent n’a pas ete 
detaille : nous allons maintenant le faire, car apres l’identification, la voie 
est libre pour lancer une recherche ! 

function chercherO { 
var p = new ArrayO ; 
var c = new ObjectO; 
gLdapURL.getAttributes(c, p) ; 

obteni rOp() ; 

gLdapOp . searchExt(gLdapURL . dn , gLdapURL . scope , 
gLdapURL. filter, c, p, 10, 10); 

} 

Cette partie est peu complexe : elle obtient juste une operation et lance 
une recherche suivant le DN, l’etendue (SC0PE_SUBTREE, c’est-a-dire le 
DN demande et ses sous-elements, nous l’avons choisi a l’initialisation), 
le fibre (objectClass=*), le nombre d’attributs cherches, leurs valeurs 
(DN, CN...), une eventuelle limite de temps, puis de taille. 

La partie la plus interessante se concentre dans le listener, lorsque les 
resultats de la recherche arrivent. 


Gestion des resultats de la recherche 

case Components. interfaces. nsILDAPMessage .RES_SEARCH_ENTRY : 
dump("\n ENTRY\n") ; 


attri buts est une liste : cn, dn, sn, etc. de ► 
toutes les proprietes disponibles 


Indice 0 : il n'y a qu'une photo. 


> 


try { 

var count = new ObjectO; 

var attributs = pMsg . getAttributes(count) ; 0 
var p = new Object; 

for (a in attributs) { 

if (attri buts[a] == "jpegPhoto") { Q 

var bcount = new ObjectO; 

var binaires = pMsg.getBinaryVa1ues("jpegPhoto" , 
bcount) ; 0 
var 1 = new Object; 

var r = binai res[0] .get(1) ; 0 

dump(" jpegPhoto : "+1. valuer" bytes\n") ; 
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var data = ""; 
for (a i n r) { 

data += String. fromCharCode(r[a]) ; 0 

} 

p["jpegPhoto"] = btoa(data) ; 0 
} else { 


var acount = new ObjectO; 

p[attributs[a]] = pMsg.getVa1ues(attributs[a] , 
acount) ; 0 

} 

} 

if (gLdapFoncti ons . apresRecherche != null) 

gLdapFonctions.apresRecherche(p) ; 0 


} catch (e) { 
dump(e+"\n") ; 

} 

dump("\n "+pMsg .dn+"\n") ; 
break ; 

case Components . i nterfaces . nsILDAPMessage . RES_SEARCH_RESULT : 

dump("\n RESULT\n") ; 

dump(" Recherche termi nee\n") ; 
break ; 


C’est ici que se concentre le coeur du traitement LDAP. Lorsqu’une 
entree correspondant a la recherche arrive, la premiere chose a faire est 
de voir les differents attributs que porte cette entree. Q Ils sont stockes 
dans la variable attri buts et count porte le nombre d’attributs (pour une 
eventuelle boucle for avec un compteur au lieu de for i n). La variable p 
sera un objet, rempli comme un tableau, avec dans les cles le nom de 
l’attribut et pour valeur la valeur de l’attribut correspondante. Nous la 
transmettrons a une eventuelle fonction indiquee par le script principal. 

On parcourt done les differents attributs. Si c’est une photo 0 au format 
JPEG, on lui applique un traitement particulier. On recupere un compo- 
sant LDAP enveloppant les donnees binaires 0 implementant 
nsILDAPBERValue, puis on demande a obtenir les donnees brutes de ce 
composant Q. On parcourt les donnees et pour chaque octet, on le trans- 
forme en son caractere correspondant pour former une chaine 0 . Cette 
chaine est ensuite encodee en base64 Q et ajoutee au tableau de retour p. 
Si c’est un attribut normal (nom, e-mail, etc.) au format texte, on recu- 
pere sa valeur normalement 0 , tout en l’ajoutant au tableau de retour. 

Enfin, si une fonction a appeler est definie 0, on l’appelle en lui fournis- 
sant le tableau contenant les differents attributs de l’entree obtenue. 


Hop : tout en base64 ! 


acount contient maintenant le nombre de 
valeurs pour I'attribut : par exemple 3 si 
objectC1ass=top, 
objectC1ass=person, 
objectC1ass=i netOrgPerson 


B.A.-BA Base64 

Elle permet de convertir des donnees binaires sous 
forme de chaine qui ne risque pas d'etre cor- 
rompue entre les differents encodages. Ainsi, si 
vous essayez d'ouvrir un executable avec un edi- 
teur de texte, vous verrez une suite de caracteres 
cabalistiques, qui dependent de I'encodage dans 
lequel on considere le fichier. 

La base64 s'affranchit de ces limites en encodant 
des donnees binaires en utiiisant 64 caracteres : 
de a a z, de A a Z, de 0 a 9, +, / et = qui est un 
caractere special. La taille est d'environ 33% supe- 
rieure a des donnees non encodees. 

La base64 est principalement utilisee pour I'enco- 
dage des pieces jointes dans les courriers electro- 
niques. Elle est decrite par plusieurs RFC. La 
fonction JavaScript permettant I'encodage est 
btoa (« binary to ascii ») et celle permettant le 
decodage est atob. 
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Pour aller plus loin Certificats 

Le traitement de type binaire n'est en general pas aussi complexe. II est utilise en interne 
par Mozilla pour le code de I'application mail : le composant enveloppant les donnees 
binaires d'un certificat est directement passe a un autre composant cherche de verifier son 
authenticite. 


Attention Reference XULPIanet 

Dans ce cas exceptionnel de composants XPCOM LDAP, la reference de 
XULPIanet indique par exemple : 
void getBf naryVal ues (char* attr, out PRUint32 count, 
retval nsILDAPBERVal ue values) 

En fait le prototype correct est : 
nsILDAPBERVal ue values getBi naryVal ues (char* attr, 
out PRUint32 count) 


Traitement XUL 

II faut maintenant exploiter les donnees analysees avec XUL. 


Le traitement DOM pour remplir la liste des connectes 

function rempl i rLi steMembres (pAttri buts) { 
if (pAttri buts ["cn"] == null) 
return ; 

var 1 = document. getElementById("xf-index-membres-liste") ; 
var li = document. createEl ement ("1 i sti tem") ; 

1 i . setAttri bute("l abel " , pAttri buts["cn"] ) ; 

1 i . setAttri bute("cl ass" , "1 i sti tem-i conic") ; 
li . setAttri bute("styl e" , "list-style-image: 

**■ url (\" chrome : //xul forum/ski n/stock_person . png\") ") ; 
li . setAttri bute("oncl i ck" , 

"rempli rInfosMembre('"+pAttributs["uid"]+" ')") ; 

1 .appendChild(li) ; 

} 

La fonction est tres lineaire : on annule si c’est un noeud que Ton traite 
(comme ou=uti 1 i sateurs ,o=xul forum). Si au contraire c’est un personne 
definie par son Common Name (CN), on continue le traitement. 

On obtient l’element <1 i stbox> contenant la liste des usagers, on cree de 
toutes pieces un element fils <listitem>, destine a etre ajoute a la 
<1 i stbox>, puis on precise certains de ses attributs : 

• le label, ou titre s’affichant sur l’item sera le nom de l’entree LDAP 
(son common name) ; 

• la classe sera li sti tem-i conic, faisant echo a menui tem-i conic, vu 
dans les premiers chapitres ; 
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Utilisee avec une recherche sur toute I'organisa- ► 
tional unit des utilisateurs : pour chaque entree, 
la fonction ajoute un li sti tem a la 
1 i stbox. 



• la propriete CSS list-style-image, deja rencontree maintes fois, 
sera celle dune image representant un petit bonhomme ; 

• en cas de clic, il faudra afficher sur l’autre onglet du panel les infor- 
mations du membre correspondant au 1 i sti tem clique : on obtient au 
final une propriete oncl i ck ressemblant a : 

oncl i ck=" rempl i rInfosMembre( 1 Jonathan ' ) 

Le resultat est au final assez joli : 



Alternative Source en RDF 

II est bien sur possible de remplir cette liste 
grace au contenu d'une source RDF. Ceci faci- 
lite enormement le traitement. On peut meme 
imaginer un script PHP se connectant au ser- 
veur LDAP et creant la source RDF, pour plus 
de simplicite. Un exemple de ce type existe sur 
le site du projet (voirwww/ rdf . php dans les 
sources). Pour la version web ne faisant pas 
appel a LDAP, la source sera bien sur remplie 
grace a RDF, mais du RDF cree a partir du con- 
tenu de la base MySQL. 


Les informations d’un connecte 

La fonction rempl i rlnfosMembre ne fait que reutiliser les mecanismes vus 
precedemment : elle relance une recherche LDAP sur le membre en par- 
ticulier dont on veut les informations, sur le serveur precise dans la confi- 
guration et indique que lorsque les resultats de la recherche arriveront, ce 
sera la fonction rempl i rPanneauInfosMembre qui devra etre appelee. 

Cette derniere, a l’aide de DOM, remplit les differents attributs du pan- 
neau. Pour l’image, l’astuce est en fait d’utiliser ce qu’en anglais on 
appelle les data url : des images dont le contenu est directement specific 
dans l’attribut src. II prend alors la forme src="data: image/ 
png ; base64 , contenuenbase64" et ceci explique l’encodage en base64 
precedent. Le type MIME est bien sur au choix, nous utilisons dans 
notre cas le type i mage/ j peg. 
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Les informations seront remplies a l’appel du callback 
rempl i rlnfosMembre vu plus haut : void son contenu. 


Remplit les attributs d’un utilisateur en particu- 
lier c'est le retour sur la recherche sur le membre 
plus has. 


Remplir les attributs d'un utilisateur 

function rempl i rPanneauInfosMembre(pAttri buts) { 
dumpC'RempI i ssage infos\n"); 

document . getEi emen tByld (" xf - i ndex-memb res -avatar") 

.src = "data: image/jpeg ; base64, "+pAttributs["jpegPhoto"] ; 


Callback lorsque Ton clique sur un utilisateur 
dans la liste : on lance une recherche LDAP sur 
les attributs de cet utilisateur en particulier. 


document . getEiementById("xf-index-membres-iocali sati on") . vai ue = 
pAttri buts ["1 "] ; 

document . getEi ementById("xf-i ndex-membres-emai 1 ") . val ue = 
pAttri buts. mail ; 

document .getEi ementById("xf-i ndex-membres-descri ption") .val ue = 
pAttri buts . descri pti on ; 

document. getEi ementById("xf-i ndex-membres-nom") .value = 
pAttri buts . cn ; 

} 

function rempli rlnfosMembre(pMembre) { 

dumpC’Membre selectionne : "+pMembre+"\n") ; 

gLdapFonctions.apresRecherche = rempl i rPanneauInfosMembre; 

var dn = "uid="+pMembre+" , "+gConfig . ldap. baseDn ; 
var hote = gConfig.ldap.hote; 
initialiserLDAP(dn , hote); 


Figure 10-4 

Le resultat final est plutot reussi I 
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En resume... 

Ce chapitre peut paraitre un peu obscur : en effet, si vous n’avez pas sou- 
vent eu l’occasion de travailler avec LDAP, les notions paraissent sou- 
vent trop abstraites pour etre comprises clairement. Mais il n’est pas 
possible de detailler integralement LDAP : les liens donnes en remar- 
ques et les « bonus » sur le site du projet vous permettront, si vous le 
desirez, de decouvrir cette technologie souvent fort utile : vous pourrez 
meme, si vous etes conquis, gerer votre carnet d’adresses avec LDAP et 
le consulter en utilisant Thunderbird/Mozilla ! 

Pour ceux qui ont deja utilise LDAP, ce chapitre aura permis d’appro- 
fondir la creation de composants XPCOM plus qu’obscurs (il aura fallu 
chercher certaines constantes dans des fichiers .h de LXR !). Peut-etre la 
preuve aura-t-elle ete faite que XUL est bel et bien un outil digne d’un 
environnement professionnel et pas seulement un gadget de « script 
kiddies » pour developpeurs web en manque d’originalite. 


Pour aller plus loin Autres composants XPCOM 

Nous avons vraiment vu tout un pan des composants XPCOM de Mozilla 
dans ce chapitre. II en existe de nombreux autres ! Si vous voulez vous 
essayer a d'autres extensions XPCOM, n'hesitez pas, plongez dans la 
reference de XULPIanet, essayez de trouver un exemple fonctionnel 
dans les sources de Mozilla et ameliorez-le I 

► http://xulplanet.com/references/xpcomref/ 

Pour aller encore plus loin Creez vos propres composants XPCOM 

Le titre parle de lui meme : jetez done un ceil au livre dedie a ce sujet sur 
Mozilla.org (connaissances en C++ requises). 

► http://www.mozilla.org/projects/xpcom/book/cxc/html/index.html 
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Do-it-yourself widgets : XBL 


Nous touchons maintenant au coeur de XUL : nous allons dans 
ce chapitre creer nos propres widgets, en melangeant DOM, 
XML, XUL, HTML, JavaScript... en fait un resume de ce que 
nous avons vu dans les chapitres precedents, agremente de 
quelques ameliorations. 


SOMMAIRE 

► Introduction a la nouvelle 
technology et presentation 
de notre widget 

► Construction du binding 
fenetreMsg 

► Integration avec la fenetre 
principale 

MOTS-CLES 

► binding XBL 

► <content> 

► <implementation> 

► <handlers> 

► champs et proprietes d'un 
widget 

► modele evenementiel du DOM 
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La premiere question qui vient a l’esprit du programmeur est : « pourquoi 
refaire ce qui est deja existant et creer nos propres widgets ? ». Cette 
interrogation, legitime, est en fait le fruit dune mauvaise information. 
Lorsque nous creons nos propres widgets, a moins de devenir volontaire- 
ment de mauvais programmeurs, nous ne reinventerons pas la roue. Un 
exemple trivial serait celui dune boite titree. Au lieu d’ecrire : 

| <label value="XUL Forum" /><vbox> . . . </vbox> 

on pourra, a l’aide de XBL, ecrire : 

<box class="boiteTitree" titre="XUL Forum"> . . . </box> 

XBL est en fait de la reutilisation de code deja existant, dans le but de 
centraliser en un « objet » XUL ce qui serait sans XBL eclate sur plu- 
sieurs fichiers. Ainsi, notre widget prendra en charge les evenements 
engendres par son contenu, le changement/l’obtention de proprietes (sa 
position, son titre, etc.), il fournira des methodes pour modifier son 
apparence, il definira son contenu, etc. Mais tout ceci n’est pas tres 
parlant ; nous allons de suite plonger dans le cas concret : le widget 
fenetreMsg, abreviation de « fenetre de message ». 


Culture XBL dans Mozilla 

En fait, de nombreux widgets sont des widgets XBL : le progressmeter en est un 
exemple. Sa declaration CSS (que nous verrons quelques pages plus loin pour 
fenetreMsg) est la suivante : 
progressmeter[mode="undetermi ned"] { 

-moz-bi ndi ng : 

urf ("chrome : //global /content/bi ndi ngs/progressmeter .xml# 

** progressmeter-undetermined") ; 

} 


Fonctionnement d’un widget XBL 

Le widget fenetreMsg 

Pour ne pas surcharger l’interface, nous allons utiliser un melange de 
HTML, de XUL et de JavaScript pour creer des fenetres volantes, sortes 
de cadres qui se deplacent « par-dessus » la page index. xul, que Ton peut 
reduire lorsqu’elles prennent trop de place et meme masquer si le besoin 
s’en fait sentir. Une fois n’est pas coutume, nous allons d’abord montrer le 
resultat final avant meme de commencer a programmer : void une copie 
decran montrant deux fenetreMsg, avec des sujets d’exemple, l’une 
reduite et l’autre agrandie. 
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Rappel DOM Inspector 

N'oubliez surtout pas de verifier la hierarchie DOM 
avec I'inspecteur. II se revelera une aide tres utile a 
la comprehension de la « logique XBL ». 



Figure 11-1 Un sujet deplie est visible et I'autre plie (le carre jaune avec le signe « + ») 

Le panneau de gauche a ete masque pour plus de visibilite. Les sujets sont 
deplafables par glisser/deposer en selectionnant leur titre (un peu comme 
la barre superieure dune fenetre dans un gestionnaire de fenetres, ou 
window manager , classique), ou bien en maintenant les touches Alt et 
Shift enfoncees et en effectuant un glisser/deposer sur n’importe quelle 
partie de la fenetre. Un double-clic sur la croix ferme la fenetre, un 
double-clic sur le titre la reduit. Une fois reduite, elle prend Failure d’un 
rectangle jaune avec seul le signe + au milieu ; un double-clic sur le + re- 
ouvre le sujet. 

L’idee originale a ete trouvee sur la suite de tests pour XBL des versions 

, , ... , r . . , , . , .. > http://www.mozilla.orq/projects/xbl/test5/ 

de Mozilla avec les tonctionnalites de debogage activees ( nightlies t t ht | 

notamment). Le concept de base a ete largement ameliore : la reduction 

des fenetres a ete ajoutee, la fermeture fonctionne differemment (de 

meme que l’ajout de fenetres), le deplacement avec Alt + Shift n’etait pas 

dans l’original et, amelioration notable, les fenetres ne sont pas enfer- 

mees dans un tableau (/ board) qui limiterait leurs deplacements. 
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Alternative Pop-up html/xul 

Cette technique est tres impressionnante du point de vue des fonctionnalites, mais elle se 
limite a des versions recentes de Firefox/Mozilla (elle fonctionne sur les premieres versions 
alpha et beta de Mozilla 1 .8, mais pas sur les versions stables telles que Firefox 1 ,0.x). Le 
melange hasardeux HTML/XUL et I'utilisation d'attributs CSS posi ti on : absol ute 
expliquent ce manque de compatibilite descendante. A I'heure de la parution de ce livre, 
il est probable que Firefox sera au moins en beta, au mieux en version finale 1 .5. 

Que faire done ? Si vous voulez tester le fonctionnement directement, telechargez une 
version 1 .5 de Firefox (les alpha sont tres stables, mais reservees aux developpeurs) et 
allez a la fin du livre pour voir comment developper avec la nouvelle organisation du dos- 
sier chrome (les explications sont en annexe). Si vous etes bloque a une version 1 ,0.x, 
I'ecriture d'une fenetre pop-up en HTML/XUL sera un tres bon exercice supplemental ! 
Et peut-etre meme pretexte a un pop-up XBL... 


Astuce Tester le widget separement 

Durant ce chapitre, nous allons progressivement 
mettre en place les differents constituants du 
widget fenetreMsg. Pour ne pas s'enliser dans 
les fichiers principaux de I'application deja com- 
plexes, il est plus judicieux de creer une page de 
« test », testxbl .xul, pour les widgets XBL. 
Nous les integrerons ensuite a i ndex . xul . 


Notre implementation : le binding fenetreMsg 

Dans cette partie, nous allons nous interesser au contenu global du 
fichier chrome://xulforum/content/xbl/bindings.xml. C’est ici que sera 
decrite l’integralite du widget fenetreMsg. Le fichier porte l’extension 
XML mais aurait tout aussi bien pu s’appeler bindings.xbl. Nous ver- 
rons son contenu plus en detail dans les parties suivantes. 

Nonobstant l’angoisse de la page blanche, nous allons des maintenant 
commencer a remplir bindings. xml . 


Un aperfu global du futur bindings.xml 

<?xml version="1.0" ?> 

<bi ndi ngs i d="xfBi ndi ngs" xml ns="http://www.mozilla.org/xbl" 
xml ns : xul =" http : //www . mozi 11a . org/keymaste r/ gatekeepe r/ 
there. is. only. xul" 

xml ns : html =" http : //www. wB . org/1999/xhtml " 
xml ns :xbl=" http: //www. mozilla.org/xbl"> 

<binding id="fenetreMsg"> 

<content> 

<!-- ici le contenu du widget — > 

</content> 

<i mpl ementati on> 

<!-- methodes, proprietes, champs... --> 

</ i mpl ementati on> 

<handlers> 

<!-- gesti onnai res d'evenements --> 

</handl ers> 

</bi ndi ng> 

</bi ndi ngs> 

Comme tout fichier XML qui se respecte, bindings.xml arbore le prologue 
XML traditionnel en premiere ligne. Plus has, nous rencontrons lelement 
bindings, qui sera amene a contenir un ou plusieurs elements binding. 
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Dans notre cas, il n’y en a qu’un seul, c’est le binding portant l’ID 
fenetreMsg. II contiendra trois elements fils : content, implementation 
et handle rs.Vous remarquerez qu’il y a de nombreux attributs xml ns sur 
le tag principal bindings : xbl (par defaut), html, xul, de nouveau xbl... 
en fait, on doit etre capable de specifier a chaque instant a quel espace de 
nommage appartient un element, ou meme, une propriete. Nous serons 
en effet amenes a utiliser des proprietes XBL sur des elements XUL : 
<xul:widget xbl : propri ete=" . . . " />. Quant aux autres elements 

comme content, binding, leur espace de nommage sera XBL par defaut. 


Le contenu du widget : <content> 

Le widget vu de I’exterieur : un bloc div et une classe CSS 

Tout commence par le fichier testxbl .xul servant a tester le widget. II 
contiendra les elements de base dune fenetre, avec les espaces de nom- 
mage XUL et HTML, puis un bloc di v particulier que nous allons voir 
immediatement. 


Le contenu de la fenetre de test (que nous adapterons ensuite a index.xul) 

<?xml versi on="l . 0" ?> 

<?xml-stylesheet href="chrome://xulforum/skin" type="text/css" ?> 

<wi ndow xml ns="http : //www . mozi 11a. org/keymas ter/gate keeper/ 

** there. is. only. xul" 

xml ns : html =" http://www.w3 .org/1999/xhtml "> Q 
<html :di v> Q 

<html :div xml ns="http ://www.w3 . org/1999/xhtml " 

class="fenetreMsg" titre="Titre du sujet #1" id="sujetl" 
auteur="Stephane" date="28/06/2005" reponses=" 5"> © 

<P> 

<b>Lorem</b> ipsum dolor sit amet, . .. Q 
</p> 

</html :div> 

<html :div xml ns="http ://www.w3 . org/1999/xhtml " 
class="fenetreMsg" id="sujet2" date="30/06/2005" 
auteur="3onathan" reponses="l"> 0 

<P> 

Lorem ipsum dolor sit amet, ... 

</p> 

</html :div> 

</html :div> 

</wi ndow> 

II faut d’abord placer l’attribut xml ns correct pour pouvoir utiliser des 
elements HTML au milieu dune fenetre XUL Q. Ensuite, un bloc div 
general contiendra tous les widgets fenetreMsg Q. Pourquoi placer tous 
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les widgets XBL dans un conteneur <div> supplemental ? Pour eviter 
Les bindings internes une erreur de placement de Mozilla lors du glisser/deposer, erreur excu- 

sable au regard des manipulations extremes de DHTML/XUL que nous 

Vous pourrez retrouver de nombreuses dedara- M imposons . On cree ensuite un bloc div appartenant a la classe CSS 

tions CSS transformant des widgets XUL en wid- . . . . . „„„ , ■ , 

gets XBL dans- fenetreMsg : on lui assigne ainsi une declaration Obb speciale, qui 

► chromeV/global/skin/global css declare son appartenance au binding fenetreMsg. Ce div sera notre 

widget fenetreMsg : il n’y a pas a proprement parler de widgets 
fenetreMsg, juste des elements qui se transforment en widget XBL grace 
a la declaration CSS adequate ©. 

FenetreMsg possede egalement des attributs titre, auteur, reponses, 
date, etc. Ses elements fils representent le contenu HTML du sujet, 
place dans un bloc p Q. Le bloc div possede l’attribut xml ns=" http:// 
www.w3.org/1999/xhtm1 ", ce qui indique que tous ses elements fils seront 
des elements HTML. Ceci evite de recrire le prefixe <html : a chaque 
nouvel element fils. 

Enfin on cree un deuxieme bloc div @ pour faire un deuxieme sujet et 
par consequent une deuxieme fenetre. II faut maintenant modifier 
xul forum. css, de maniere a prendre en compte la declaration XBL. 
C’est l’attribut -moz-binding qui sera utilise. II prend la nature d’une 
URL, suivie d’un # indiquant l’ID du binding, un peu comme les ancres 
en HTML. 


Les extensions CSS de Mozilla permettent d’assigner un binding a un element normal 

/* xbl */ 

.fenetreMsg { 

-moz-binding : url ('chrome://xulforum/content/xbl/ 

**■ bindings. xbl#fenetreMsg ') ; 

} 

En fait, nous aurions pu assigner la classe fenetreMsg a n’importe quel 
element XUL ou HTML, puisque du moment qu’on lui applique un 
-moz-binding, il acquiert les proprietes du widget fenetreMsg. II faut 
bien comprendre que Ton n’ecrira pas <fenetreMsg> dans le code XUL. 
On utilisera un conteneur quelconque (generalement <box> ou <div>, 
plus adapte a du contenu HTML), qui sera la pour fournir un squelette, 
a completer par le widget fenetreMsg dont nous allons voir la nature 
dans le paragraphe suivant. 

Le contenu interieur : melange HTML et XUL 

Le contenu final du widget sera determine grace a un melange savam- 
ment dose, acceptant comme ingredients : 

• le contenu du widget fenetreMsg defini dans bindings, xml ; 
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• le contenu du widget support defini dans index. xul (ou testxbl .xul 
pour l’instant) ; 

• les regies definissant la repartition des deux elements, leur ordre, etc., 
placees dans bi ndi ngs . xml . 


Le contenu du widget XBL (bindings.xml) 

<content> 
chtml :div> 

<children /> 

<html :div> 

<xul idescription cl ass="i nfosSujet" value="D: " /> 
<xul : description cl ass="i nfosSujet" 
xbl :inherits="value=date" /> 

<xul :description cl ass="i nfosSujet" value="A: " /> 
<xul : description cl ass="i nfosSujet" 
xbl :inherits="value=auteur" /> 

<xul :description cl ass="i nfosSujet" value="R: " /> 
<xul : description cl ass="i nfosSujet" 
xbl :inherits="value=reponses" /> 

<xul idescription value=" || " /> 

<xul :description class="croixQuitter" value="X" /> 
<html : center> 

<xul :description cl ass="ti treSu jet" 

value="Sujet sans titre" xbl :inherits="value=titre" /> 
</html : center> 

</html : di v> 

</html :div> 

</content> 


C'est le div principal dont on change les pro- 
priety top et 1 eft ; il correspond a : 
document .get AnonymousNodes (this) [0] 
Ceci est un rappel utile pour plus loin. 


Le comportement n’est pas sans rappeler celui des overlays. D’abord, il y 
a le widget de base, portant l’attribut class="fenetreMsg". Ses elements 
fils (<p> notamment) sont supprimes et remplaces par le contenu de la 
balise <content>. Ensuite, un nouveau remplacement est effectue. La 
balise <chi ldren> est remplacee par la balise <p> (les enfants) du premier 
<div>. On a finalement : 


<di v> 

<div cl ass="fenetreMsg"> 

<di v> 

<pxb> . . . </b> . . . </p> 

<divxxul : description />. . .</div> 
</di v> 

</ di v> 

<div cl ass="fenetreMsg"> 

</ di v> 

</ di v> 


< Le conteneur de testxbl . xul . 


< Premier widget fenetreMsg. 

< Appartient a <content>. 

< Remplacent <chi 1 dren />. 

< Defini dans <content> ; englobe toutes les 
infos sur le sujet en cours. 


< Autre widget fenetreMsg. 
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Ceci est done le resultat theorique qui permet de comprendre l’affichage 
final du widget. En revanche, si Ton utilise DOM (et e’est le probleme 
qui va survenir dans quelques pages), du point de vue logique, l’enfant du 
<div cl ass="fenetreMsg"> est toujours <p>. Nous allons y remedier, 
mais avant, il faut expliquer les attributs tit re, date sur le <div> et les 
xbl : i nheri ts sur les <descri pti on>. 

L’attribut xbl : inherits permet, une fois applique sur un widget XUL 
(ou HTML), de specifier de quels attributs du widget « support » ce der- 
nier doit heriter. Ainsi, pour la seconde balise description, la valeur de 
l’attribut value doit etre heritee d’apres la valeur de l’attribut date du 
widget support. II en va de meme pour les quatrieme et sixieme 
descri ptions. 

Pour le titre, une valeur est deja assignee. C’est en fait une valeur par 
defaut, qui sera utilisee s’il n’y a pas d’attribut titre sur le widget 
support et ecrasee dans le cas contraire. 


Attention Melanger HTML et XUL 

Nous decidons ici d'utiliser les deux technologies, imbriquees I'une dans I'autre. II ne faut 
surtout pas se meprendre. Ici, I'utilisation d'elements <di v> permet d'arriver a nos fins 
(des fenetres en glisser-deposer), la ou des elements XUL auraient mal interprets les posi- 
tions absolues en CSS. Mais surtout, le contenu interne de ces elements HTML est lui- 
meme du HTML : la mise en forme des sujets ne peut pas se faire grace a XUL (XUL est un 
langage de description d'interface, pas de mise en forme de texte). Lorsque I'utilisateur 
voudra poster un message, le HTML sera permis et remplira son role : mettre en forme du 
texte grace a des couleurs, un soulignement, des effets de police, des listes... 

II faut done bien garder a I'esprit que XUL est le langage structurel de description d'inter- 
faces et que HTML sera utilise uniquement dans une optique de presentation, de mise en 
forme de texte. 


La mise en forme CSS 

Maintenant que la structure du widget est definie, une mise en forme 
s’impose. CSS va encore une fois nous venir en aide. La plupart des pro- 
prietes vous seront familieres, car deja rencontrees dans de nombreux 
chapitres auparavant. Nous ne detaillerons que celles qui n’ont pas ete 
rencontrees auparavant et qui sont vraiment nouvelles. 

.fenetreMsg > p { 
width: 200px; 
height: 200px; 

overflow: auto; 

} 
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.fenetreMsg > div { 
position: absolute; 
border: lpx dotted black; 
padding: 8px; 

background-color: lightyellow; 

} 

.fenetreMsg description. titreSujet { 

font-family: Arial , Helvetica, Sans-Serif; 
font-weight: bold; 
color: grey; 

background-color: rgb(227 , 227 , 199) ; 
font-size: larger; 
padding-left: 5px; 
padding-right: 5px; 

cursor: move; 

max-width: i80 P x; avaxhome..ws 

} 

.fenetreMsg description. infosSujet { 
font-size: x-small; 
font-style: italic; 
padding-left: 0; 
padding-right: 0; 
margin-left: 0; 
margin-right: 0; 

} 

.fenetreMsg description. croixMaximiser { 
font-weight: bold; 
font-size: larger; 

} 

.fenetreMsg description. croixQuitter { 
font-weight: bold; 

} 

Pour le paragraphe amene a contenir le texte du sujet et les eventuelles 
reponses, on choisit une taille fixe et une directive overflow: auto. Cette 
derniere indique que si le texte prend plus de place que 200 pixels x 
200 pixels, il faut ajouter des barres de defilement pour le <p> (le moteur 
Gecko s’en charge automatiquement). 

Le di v a la bordure en pointilles et a la couleur de fond jaune est le pre- 
mier enfant de <content>. C’est ce bloc div qui sera redimensionne et 
deplace. Sa position absolue indique qu’il est « detache » d’un eventuel 
conteneur et qu’il se positionne de maniere libre sur l’espace qui lui est 
reserve (la zone client representee par la taille de la page). 

Le titre du sujet subit quelques modifications de style et arbore notam- 
ment un curseur move. Celui-ci correspond a une croix avec des fleches le 
plus generalement et indique qu’un deplacement est possible sur la barre 
de titre. Ce curseur apparaitra quand la souris survolera le titre. Une lar- 
geur maximale lui est assignee : c’est la propriete max -width. En la cou- 
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plant avec l’attribut crop="right", c’est le texte qui deborde a droite qui 
sera coupe et remplace par «... ». Enfm, les descriptions apportant des 
informations sur le sujet sont rendues assez discretes, tandis que les croix 
servant a maximiser et quitter le sujet sont assez marquees. 


Un widget qui s’anime : <implementation> 

Les proprietes et les champs 

Lors de la programmation du comportement de notre widget, nous 
serons amenes a defmir des proprietes : l’objet est-il en mouvement ?, si 
on le deplie, quelle etait sa hauteur precedente ?, quelle est sa position ? 
etc. Dans le dernier cas, elle se modifie grace a des proprietes CSS (l eft : 
"XXX px"; top: "XXX px; "). Plutot que de manipuler ces proprietes a 
chaque fois (et ainsi ajouter le « px », le supprimer pour des calculs de 
deplacement qui impliquent des entiers...), nous allons defmir deux pro- 
prietes posX et posY, qui se comporteront comme des nombres, mais en 
fait modifieront/rapatrieront les proprietes CSS ; la conversion de nom- 
bres en proprietes CSS avec « px » se fera de maniere transparente. 

Pour les proprietes posX et posY, on definit la maniere de les obtenir grace 
a <getter> et la maniere de leur assigner une valeur grace a <setter>. 
Pour l’obtenir, on recupere la valeur de la propriete CSS correspondante : 
c’est une chaine. On en enleve les deux derniers caracteres (on la coupe de 
la position 0 a la position -2, soit deux caracteres avant la fin), on la trans- 
forme en nombre (car c’etait une chaine) et on la retourne. Pour lui assi- 
gner une valeur, on ajoute px a la variable val (la valeur fournie lorsque 
Ton ecrit monBi ndi ng . posX = 10 ; par exemple et qui est toujours appelee 
« val ») et on change la propriete CSS correspondante. 

Cette abstraction des proprietes CSS pour ne manipuler que des entiers 
sera fort utile par la suite (dans les gestionnaires d’evenements). Pour 
l’instant, vous pouvez en voir une utilisation dans le constructeur du 
widget (balise <constructor>) : pour tout widget nouvellement cree, on 
le positionne aux coordonnees (15; 15), on le plie et on le masque. 
Lorsque nous en aurons besoin (nous verrons ceci lors de l’integration a 
index. xul), nous le « demasquerons » puis nous le deplierons. 

Nous utilisons aussi des balises <fie1d>, qui sont simplement des 
champs dans lesquels on peut Stocker une variable (accessible par toutes 
les methodes de l’objet) et qui ne necessitent pas de traitement pour 
choisir/rapatrier leur valeur. Nous verrons leur utilite lors du detail des 
differentes methodes. 
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<implementation> A 

<constructor> 

this.posX = 15; 

.> this.posY = 15; 

this.plierO ; 

this. style. visibility = "hidden"; 

</constructor> 

<f ield name="enMouvement" >f alse</f ield> 

<f ield name- 1 prevHauteur" /> 

<field name="prevX" /> 

<field name="prevY" /> 

<property name="posX"> 

<getter> 

var l = document . getAnonymousNodes (this) [0] .style. left; 
return Number(l.slice(0, -2)); 

</getter> 

<setter>return document. getAnonymousNodes ( this) [0] .style. left = val+"px" ;</setter> 

</property> 

<property name="posY"> 

<getter> 

var l = document . getAnonymousNodes (this) [0] .style. top; 
return Number(l.slice(0, -2)); 

</getter> 

<setter>return document .getAnonymousNodes (this) [0] .style. top = val+"px" ;</setter> 

</property> 

| <method name=" plier" > I 

+ 35 lines: <body> 

</method> 

| <method name=" deplier" > I 

+ 28 lines: <body> 

</method> 

| <method name="cacher"> I 

+ 6 lines: <body> 

</method> 

</implementation> 

<handlers> ▼ 

" xbl/bindings . xbl" 176L, 6047C written 29,17-21 33% 


Figure 11-2 Le contenu de la balise <implementation> 


La variable this fait reference au widget fenetreMsg, le div portant 
l’attribut class="fenetreMsg". On peut acceder a ses proprietes, ses 
champs, ses methodes comme cela est fait dans le constructeur. Son ele- 
ment fils est <p>, comme explique precedemment (et non pas <div>). 


Les methodes 

Trois methodes sont utilisees : elles se ressemblent beaucoup et permet- 
tent de plier, deplier et cacher la fenetre de message. 


Astuce Methode prenant des parametres 

lei nous ne definissons que le corps de la methode 
(body). Si vous avez besoin de lui fournir des 
parametres, vous pouvez placer le tag : 
<parameter name="nomDuParainetre" /> 
avant le tag <body>, puis utiliser ensuite dans le 
code JavaScript la variable nomDuParametre. 
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Plier 


n est le contenu de <content>, n[0] est ► 
<contentxdi v>. 


Les enfants du <contentxdi v>. ► 


Evite les noeuds #text et les noeuds ► 
#comment qui n'ont pas de style. 


Les noeuds contenus dans la balise <di v> du ► 
fichier XUL principal, c'est-a-dire les 
<chi ldren /> . 


On cree la petite croix qui servira a maximiser > 
plus tard dynamiquement et ce a chaque fois. 


avaxhome 

B.A.-BA display et visibility 

Lorsque Ton veut masquer un element, il y a deux 
possibilites. La plus rapide et la moins ennuyeuse 
est de mettre son attribut visibility a 
hidden (annulable en choisissant visible). 
L’element n'est plus affiche sur la page, mais par 
contre, I'espace necessaire est toujours alloue, 
d'ou de grands espaces vides correspondant a 
(element non affiche. L’autre methode consiste a 
mettre son attribut display a none (pour 
annuler, il suffit de lui attribuer une valeur vide). 
Ainsi, I'element se comporte comme s'il avait ete 
supprime de la page. Mais lorsqu'on le « remet » 
dans la page, I'agencement peut etre modifie. 
Testez done toujours les deux methodes pour 
savoir laquelle convient le plus a votre cas I 


Comment plier une fenetre ? 

En masquant un par un ses elements et en reduisant sa taille 

<method name="pl i er"> 

<body> 

< I [CDATA[ 

var n = document .getAnonymousNodes(thi s) ; 
thi s . prevHauteur = n[0] .style. height; 
n [0] . styl e . hei ght="12px" ; 

var nl = n [0] . chil dNodes ; 

for (var i = 0; i < nl. length; ++i) { 

if (nl[i] . nodeName[0] != "#") { 

nl[i] .style. display = "none"; 

} 

} 

var n2 = thi s . chil dNodes ; 
for (var i = 0; i < n2. length; ++i) { 
if (n2 [i ] .nodeName[0] != "#") { 

n2[i] .style. display = "none"; 

} 

} 

var croix = document. createElement("description") ; 
croix. setAttribute("class" , "croixMaximiser") ; 
croix. setAttribute("value" , "+") ; 

n [0] .appendChild(croix) ; 

]]> 

</body> 

</method> 

Pour reduire la fenetre, nous adoptons une procedure systematique : 
d’abord masquer un a un les enfants du premier <div> contenu dans 
<content> (lui n’est pas masque, seuls ses enfants le sont) puis masquer 
les enfants du <div> de support (la balise <p>). 

Pour obtenir les balises de <content>, on utilise la methode document. 
getAnonymousNodes applique a l’objet this. Elle renvoie une liste : son 
premier element est le premier enfant de <content>, e’est-a-dire le <div> 
qui nous interesse. Il n’a qu’un seul enfant: un autre <div>, mais la 
boucle for laisse la voie libre pour aj outer d’autres elements. 

Ceci permet de resoudre le probleme pose en debut de chapitre, qui preci- 
sait que selon le DOM les enfants de thi s netaient que la balise <p>. Il est 
interessant de noter l’emploi de la propriete nodeName d’un noeud DOM : 
contrairement a tagName, elle est defmie pour tous les noeuds, meme les 
noeuds texte et commentaire, ce qui permet d’ailleurs de les eviter en tes- 
tant la nature du premier caractere du nodeName. Pour obtenir les enfants 
du <di v> de support, on utilise l’objet this et sa propriete chi 1 dNodes. On 
parcourt de la meme maniere tous ses enfants et on les masque un par un. 
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Quels sont les widgets restants ? Le <div class="fenetreMsg"> de sup- 
port mais ce dernier est purement structurel et le premier <div>, enfant 
de <content> : c’est celui qui a une bordure noire pointillee et un fond 
jaune (celui qui en realite se revele a l’affichage). II est toujours visible : 
reduit a 12 pixels de hauteur, on lui ajoute une croix creee de toutes 
pieces ; elle servira a le maximiser plus tard. Le sujet est plie ! 

Deplier 

Pour deplier, on retablit la hauteur originale du cadre (ceci peut servir si 
Ton decide d’implementer le redimensionnement plus tard) et on lance 
trois boucles. 

• La premiere passe en revue les elements fils du <contentxdi v> et 
supprime purement et simplement la croix ayant servi a maximiser. 


File Edit Tools Syntax Buffers Window Themes Help 

jDQQi <i & « ft E @ 4= © eia 9 »l L 

3 SB M SJ 


<> <method name=" plier"> 


- 

+ 35 lines: <body> 



a> </[ethod> 




<method name=" deplier" = 

<body> 

<! [CDATA[ 
dump(" Deplier" ) ; 

var n = document . getAnonymousNodes (this) ; 
var nl = n[0] .childNodes; 
n [0] . style . height = this . prevHauteur; 

for (var i = 0; 1 < nl. length; i++) { 

if (nl [ 1 ] . nodeName [0] != "#" && nl[i] .className == " croixMaximiser" ) 
n [0] . removeChild (nl [i ] ) ; 

> 

for (var i = 0; i < nl. length; i++) { 
if (nl [i ]. nodeName [0] != "#") { 
nl[i] .style. display = 

dump ("Showing : "+nl[i] .nodeName+" / "+nl[i] . tagName+"\n" ) ; 

> 

> 

var n2 = this. childNodes; 
for (var i = n2. length-1; i >=0; --i) { 
if ( n2[i ] .nodeName[0] != "#") { 
n2[i] .style. display = 

dump ("Showing : "+n2[i] .nodeName+" / "+n2[i ] . tagName+" \n" ) ; 

} 

} 

]]> 

</body> 

</method> 

cmethod name="cacher" > 


+ - - 

6 lines: <body> 




</method> 


- 



87,6-9 

49% 


Figure 11-3 Le depliage est encore plus simple ! 
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• La seconde parcourt de nouveau les memes elements, mais pour les 
montrer cette fois-ci. 

• La derniere parcourt les elements fils du <di v class="fenetreMsg"> 
de support et les montre eux aussi. 

Cacher 

La methode servant a cacher un sujet (double-clic sur la croix) est 
simplissime : 

<method name="cacher"> 

<body> 

< ! [CDATA[ 

this. style. visibility = "hidden"; 
this.plierO ; 

]]> 

</body> 

</method> 

II suffit de masquer le sujet et de le plier. Cette astuce evite des erreurs 
lorsque Ton remontre l’objet (erreurs qui seraient arrivees si on avait uti- 
lise la propriete CSS display) et le pliage evite l’apparition d’un curseur 
de deplacement fantome, qui apparaitrait si on passait la souris au- 
dessus du cadre de titre, non affiche, mais toujours present. 

Cependant, comment le widget XBL sait-il a quel moment declencher 
le pliage, le depliage ? Comment reagit-il aux evenements qui se produi- 
sent en lui ? Nous avons vu les deux premiers tags presents dans un 
binding: <content> et <implementation>. II nous reste le dernier a 
etudier : <handlers>. 


Un widget reactif : le <handler> 

C’est ici un autre avantage des widgets XBL qui se revele : en plus de 
centraliser le contenu, les methodes, ils centralisent aussi les evenements. 
Toutes les methodes onXXX que Ton aurait retrouvees dans un fichier 
JavaScript pour un widget classique se retrouvent sous une forme equiva- 
lente dans la balise <handlers> d’un widget XBL, qui contiendra ce que 
Ton appelle les gestionnaires d’evenements. Un exemple simple illustrera 
de suite ce concept. 
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Le double-clic 


Dans la balise <handlers> on retrouve une balise <handler> par evenement 

<handler event="dbl cl i ck"> 

switch (event. originalTarget.className) { 
case "titreSujet" : 
thi s . pi i er() ; 
break; 

case "croi xMaxi mi ser" : 
thi s .depl ier() ; 
break; 

case "croixQuitter" : 
thi s . cacherO ; 
break; 

} 

</hand1 er> 


Ici, levenement pris en compte est le double-clic. Les noms des evene- 
ments sont les memes que ceux des attributs que Ton peut porter sur les 
elements XUL, avec le on en moins. 


B.A.-BA Les differents evenements, liste complete 

• onbl ur/onfocus : I'element perd la focalisation ou gagne la 
focalisation ; utile pour des champs texte ; 

• onchange : lorsque la valeur change, pour un champ texte, une liste 
deroulante, etc. ; 

• oncl i ck, ondbl cl i ck : clic et double-clic ; 

• onkeydown/onkeyup : une touche est enfoncee ou relachee ; 

• onkeypress : apres une pression sur une touche ; 

• onload/onunload: le document (I'image) est charge(e) ou 
decharge(e) ; 

• onmousedown/onmouseup : le bouton de la souris est baisse ou releve ; 

• onmouseover : la souris est sur I'element ; 

• onmousemove : la souris est deplacee ; 

• onmouseout : la souris quitte I'element ; 

• onreset/onsubmi t : le formulaire est remis a zero ou envoye (balise 
HTML <form>) ; 

• onresize : la fenetre est redimensionnee ; 

• onselect : du texte est selectionne ; 

• onerror/onabort ; le chargement d'une image a regu une erreur ou 
est interrompu. 

Le plus generalement, seuls quelques elements a la souris seront utilises, 
eventuellement les on(un)1 oad sur un <wi ndow>. 

Dans la majorite des cas, sur la reference de XUL Planet, outre les tradi- 
tionnels oncommand, onload, etc., vous verrez quels sont les signaux sup- 
plementaires disponibles pour un element (comme I'element <textbox> 
qui propose onchange et oni nput). 
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Chacun des trois elements dune fenetre sur lesquels on peut double- 
cliquer (la croix pour quitter, le titre pour reduire, le + pour maximiser) 
est differencie des deux autres par sa classe CSS. On peut done voir, 
lorsqu’un double-clic est effectue sur le <div class="fenetreMsg"> ou 
l’un de ses enfants, a quelle classe appartient l’objet a l’origine du double- 
clic et adapter la reaction a adopter. 

Lorsque Ton programme le gestionnaire d’evenement, la variable event 

* http.//xulplanet.com/references/objref/ est creee automatiquement et represente l’objet Event associe a l’evene- 

ment qui vient de se produire. 

En effet, le modele evenementiel du DOM indique qu’une fonction de 
callback rei^oit comme premier parametre un objet Event. Ainsi en 
JavaScript on ecrira, pour une fonction de callback traditionnelle : 

function maFonctionDeCallback(e) { 

dumpC'J'ai un nouvel evenement !\n"); 

dump("Il s'est produit a l'origine sur une cible de type" 

+e .original Target .tagName+"\n") ; 

} 

L’objet Event possede plusieurs proprietes interessantes. La premiere 
utilisee est originalTarget. Elle se refere au noeud original qui a 
declenche l’evenement (le xul : description du titre par exemple) et dif- 
fere en cela de la propriete target, qui, elle, represente le noeud sur 
lequel l’evenement a ete dispatche (notre widget fenetreMsg). 

Ainsi, on examine la classe du noeud sur lequel s’est produit a l’origine 
l’evenement et Ton reagit en consequence : le code parle de lui-meme. 


Le bouton de la souris est balsse 

Nous allons successivement voir les handlers pour les differents evene- 
ments qui se produisent lors du deplacement de la fenetre et ce dans 
l’ordre chronologique. 

Le premier evenement qui se produit est onmousedown : le bouton de la 
souris est baisse. 

<hand1er event="mousedown"> 

var t = event. originalTarget; 

if C(t.tagName=="xu1 :description" && t.className == 

"titreSujet") || (event. altKey && event. shiftKey)) { Q 
thi s . enMouvement = true; 
this.prevX = event . cl i entX; Q 
this.prevY = event . cl i entY; Q 

} 

var max = 0; 

var divs = document .getE1ementsByTagName("di v") ; 
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for (var i = 0; i < divs. length; i++) { 
if (divs[i] .style. zlndex > max) 
max = divs[i] .style. zlndex; 0 

} 

event. target. style. zlndex = Number(max)+1; 
document . getAnonymousNodes(thi s) [0] . styl e . zlndex = 

Number (max) +1; 

</handl er> 

Nous ferons ici usage des champs vus plus haut mais dont l’utilite n’avait 
pas ete expliquee. 

Tout commence avec un test conditionnel Q : si l’evenement s’est pro- 
duit sur le titre, ou si les touches « alt » et « shift » on ete maintenues 
enfoncees (les memes proprietes existent pour les autres modifieurs : 
Ctrl Key, metaKey), c’est un deplacement de la fenetre qui a ete lance. 
L’objet fenetreMsg est done en mouvement et sa position actuelle est 
stockee dans prevX et prevY 0 . 

clientX et clientY sont deux proprietes d’un evenement qui indiquent a 
quelle position a eu lieu l’evenement (a la souris bien sur), par rapport au 
coin superieur gauche de la zone client (la zone de l’ecran occupee par la 
page). Le defilement n’est pas pris en compte : pour cela il faudra utiliser 
pageX et pageY. Si vous voulez les coordonnees par rapport a l’ecran, 
screenX et screenY vous seront utiles (pour ouvrir une fenetre pop-up a 
l’endroit d’un clic de souris par exemple). 

Ceci servira lorsque nous bougerons la souris : en calculant la difference 
de la nouvelle position (l’evenement onmousemove advient apres que la 
souris a ete bougee) et de la position precedente (prevX et prevY), on 
obtiendra les coordonnees du vecteur deplacement du cadre sujet, qui 
seront appliquees a ses attributs posX et posY pour le deplacer. On pourra 
ensuite remplir prevX et prevY avec les coordonnees actuelles pour que le 
prochain onmousemove puisse calculer le nouveau vecteur deplacement. 

Enfin, nous utilisons une propriete CSS un peu etrange : zlndex Q. 
C’est la position du cadre di v par rapport a l’axe vertical, e’est-a-dire de 
l’ecran vers l’ceil du lecteur. Une position superieure aux autres indique 
que le cadre doit etre place « par-dessus » les autres. Pour que le cadre 
que nous deplafons soit toujours au-dessus des autres, on examine tous 
les cadres du document et on recupere la valeur du zlndex maximal. On 
y ajoute 1, pour que notre cadre en deplacement soit au-dessus de tout 
autre cadre et on l’applique aux deux div, le div support et le div du 
<content>. 
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La souris est deplacee 

<handler event="mousemove"> 
if (thi s . enMouvement) { 

this.posX += event. clientX-this.prevX; 
this.prevX = event . cl i entX; 
this.posY += event . cl i entY-thi s . prevY; 
this.prevY = event . cl i entY; 

} 

</handler> 

Comme explique, on calcule la difference de la nouvelle position avec la 
precedente et on applique cette difference, correspondant au deplace- 
ment qui s’est produit, aux coordonnees du cadre, qui seront transfor- 
mees automatiquement en attributs CSS grace au <setter>. On prend 
ensuite les coordonnees actuelles comme coordonnees precedentes ce 
qui permettra de calculer de nouveau le deplacement au prochain evene- 
ment mousemove. 

Generalement, les evenements mousemove se suivent a des intervalles tres 
rapproches (au grand maximum apres un deplacement de trois pixels). 

La souris est relachee 

Le handler prend une ligne et arrive juste apres que Ton a relache le 
bouton de la souris. 

<handler event="mouseup"> 
this .enMouvement = false; 

</handler> 

Maintenant que le bouton est relache, le pop-up ne peut plus suivre les 
deplacements de la souris, autrement dit, le cadre sujet n’est plus en 
mouvement. C’est ce qu’indique cette ligne. 

Mise en relation avec la page principale de 
XUL Forum 

La totalite du contenu du fichier bindings. xml a ete explicitee. II reste 
maintenant une derniere formalite a accomplir : integrer ce nouveau 
widget avec index. xul et le lier a l’arbre : un double-clic sur un sujet ou 
un message devra ouvrir un cadre correspondant et devra identifier le 
sujet ou le message a l’origine de ce clic, ce qui n’est pas forcement evi- 
dent avec un arbre dont le contenu est cree par RDF (car il pose un pro- 
bleme similaire a celui des <chi ldren /> au niveau du DOM). 
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Modifications dans le fichier XUL 


Tout a la fin de i ndex . xul , nous preparerons quelques sujets vides (qui se 
cacheront d’eux-memes grace au constructeur XBL), par exemple cinq, 
ce qui permettra de les utiliser au fur et a mesure que le besoin s’en fait 
sentir et de ne pas depasser un nombre « limite » de sujets, qui rendrait la 
navigation impossible. 

<html:div id="xf-div-popups"> 

<html :div xml ns=" http://www.wB .org/1999/xhtml " 
class="fenetreMsg"> 

<px/p> 

</html :div> 

<html :div xml ns=" http://www.wB .org/1999/xhtml " 
class="fenetreMsg"> 

<px/p> 

</html :div> 

</html :div> 

Ces sujets sont pre-remplis avec leur element <p> amene a contenir le 
HTML du sujet : nous allons voir de suite comment tirer parti de cette 
pre-organisation avec JavaScript. 

Modifications dans le JavaScript 

La fonction qui gerera le double-clic sur l’arbre s’appellera 
ouvri rPopupSujet. Nous assignons un gestionnaire d’evenement au 
double-clic sur l’arbre grace a cette ligne de code, placee en tete de la 
fonction d’initialisation. 

document . get El ementById("xf-i ndex-arbre") . add Event Li stener( 
"dblclick", ouvri rPopupSujet , true); 


Alternative Attribut ondbl click 

Nous aurions bien sur pu utiliser : 

<tree ondblclick="ouvrirPopupSujet(e)" /> 

Ceci n'est qu'un moyen alternatif qui peut neanmoins se reveler utile lorsqu'il faut atta- 
cher/detacher dynamiquement un gestionnaire d'evenement. 


La fonction ouvri rPopupSujet est la suivante : 
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La fonction ouvrirPopupSujet : la reponse a un double-dic sur I’arbre 

function ouvri rPopupSujet(e) { 

var t = document. getE1ementById("xf-index-arbre") ; Q 
if (t. view. selection. count != 1) 
return; Q 

var index = t . currentlndex ; 
var col = t.co1umns["xf-index-arbre-id"] ; 
var titre = e.currentTarget.view.getCe11Text(index, 
co1)+"\n"; Q 


On cherche si on a deja utilise un div pour ce ► 
sujet. 


Si on n'en a pas trouve, on prend le premier qui ► 
est libre (il est aussi libre s'il est cache) 


var divs = document. getElementByldf 

"xf-di v-popups") .childNodes ; 
var trouve = false; 
var i ; 

for (i = 0; i < divs. length; ++i) { © 

if (di vs[i] .nodeName[0] != "#" && divs[i].id == titre) { 
trouve = true; 
dump(divs[i] .id+"\n") ; 
divs [i] .depl ier() ; 
dump(divs[i] .nodeName) ; 
break ; 

} 

} 

if (! trouve) { 0 

for (i = 0; i < divs. length; ++i) { 

if (di vs [i ]. nodeName [0] != "#" && (divs[i].id == "" || 
divs[i] .style. visibility == "hidden")) { 
trouve = true; 
break ; 

} 

} 


if (! trouve) { Q 

ajouterErreur(gStri ngBundle .getStri ng("tropSujetsOuverts")) ; 
return ; 

} 


var div = divs[i]; Q 
div. id = titre; 

div.setAttribute("auteur", "Jonathan") ; 
div.setAttribute("date" , "aujourd 1 hui ") ; 
di v . setAttri bute(" reponses" , "5") ; 
div.setAttribute("titre" , ti tre . si i ce(22 , -1)) ; 


var p = div.getElementsByTagName("p") [0] ; 

p.innerHTML = "<b>Lorem ipsum</b> dolor sit amet,... ?<br /> " 
+ titre; Q 
div.appendChild(p) ; 

div. style. visibility = "visible"; 
div.deplierQ ; 0 


208 


www.frenchpdf.com 


La reponse a adopter lors d’un double-clic sur l’arbre commence par une 
ligne toute simple : il faut recuperer l’arbre que Ton va traiter Q. S’il n’a 
aucune ligne selectionnee, on arrete de suite le traitement 0 , car il n’y 
aurait aucun sujet a montrer. 

Ensuite, les instructions sont moins evidentes. Commeni^ons par la 
sixieme ligne 0 . La propriete currentTarget de l’objet Event represente 
le noeud actuellement touche par l’evenement (pas le noeud original : 
propriete originalTarget et pas le noeud sur lequel l’evenement est 
survenu : propriete target). Ce noeud est bien sur un element tree. Si 
vous etudiez ses proprietes sur la reference XUL Planet, vous remar- 
querez tout en bas de la page une ligne view ; Type: nsITreeView. 
Cette propriete d’un <tree> est en fait un objet servant a creer le contenu 
de l’arbre. Il en existe un pour les arbres dont le contenu est directement 
specific dans le fichier XUL, un pour les arbres RDF, vous pouvez 
meme creer vos propres view ! 

Nous ne detaillerons pas ce processus complexe (une URL pour aller 
plus loin vous est donnee en marge), mais nous retiendrons que parmi 
les nombreuses fonctions de l’interface nsITreeView, il en existe une 
appelee getCellText. Elle prend comme parametres l’index de la ligne 
selectionnee (obtenu grace a la propriete currentlndex de l’arbre) et un 
element XUL representant la colonne dont on veut obtenir le texte. 
Nous l’utilisons pour obtenir le contenu de la colonne ID (voir astuce ci- 
dessous). 


Astuce Colonne cachee 

Nous avons ajoute une colonne cachee dans le document XUL index-forum- 
overl ay . xul 

ctreecol id="xf-index-arbre-id" labe1="id" f1ex="l" 
hidden="true" i gnorei ncol umnpi cker="true" /> 

</treeco1 s> 

La colonne est masquee et n'apparait pas dans le « column picker » qui permet de deter- 
miner quelles colonnes afficher. On ajoute ensuite dans <treerow> I'element corres- 
pondant. 

ctreecell labe1="?message" /> 

Ceci permet de Stocker pour chaque ligne son identifiant sous la forme d'un URI « http:// 
www.xulforum.org/sujets/XXidsujetXX/messages/XXidmessageXX » unique, qui servira 
ensuite lorsque nous voudrons rapatrier le contenu d'un message particulier. 

avaxhome 

La suite est plus conventionnelle : on parcourt la liste des blocs div deja 
presents dans le document i ndex . xul 0 . Si Ton trouve un bloc dont FID 
est le meme que celui du message double-clique, on le deplie et on le 
montre. Si ce premier passage n’a rien donne, on refait un deuxieme pas- 


► http://xulplanet.com/tutorials/xultu/ 
treeview.html 


Attention Compatibility entre les 
differentes versions de Mozilla 

Pour Gecko 1 .8 (Mozilla 1 .8 devenu entre temps 
Seamonkey 1.0, Firefox et Thunderbird 1.5), le 
deuxieme argument est effectivement un ele- 
ment <treecof>. En revanche, pour les ver- 
sions inferieures (Mozilla 1 ,7.x, Firefox et 
Thunderbird 1.0.x), le deuxieme argument est 
une charne donnant juste I'lD de la colonne. 
Attention done I 
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sage © qui cherche un bloc div libre : un sujet qui serait soit masque (l’uti- 
lisateur a quitte avec la croix), soit non encore utilise. Si Ton n’a toujours pas 
trouve de widget XBL de libre, on affiche un message d’erreur demandant 
de fermer un sujet 0 . 

La suite n’est valable que si Ton a trouve un sujet libre O (instruction 
return dans le cas contraire). L’lD du widget est desormais l’ID du mes- 
sage a afficher, son titre, sa date, son auteur et son nombre de reponses 
sont aussi changes. Son element fils <p> servira a contenir du HTML 
engendre pour afficher les differents messages : on utilise done la pro- 
priety innerHTML qui permet de gagner du temps 0 en rentrant directe- 
ment le contenu sous forme de HTML (et non pas sous forme 
d’elements DOM, alternance de noeuds #text et de noeuds HTML). 

Enfin, lorsque le sujet est pret, on le deplie et on le montre ! 0 

Nous pourrons au passage implementer le comportement des trois der- 
niers boutons de la barre d’outils : le principe est le meme et nous ne 
ferons pas au lecteur l’affront de detailler les callbacks. II suffit de par- 
courir les div comme nous l’avons fait plus haut et, pour chacun, 
d’appeler soit sa methode plier, soit sa methode deplier, soit sa methode 
masquer. 


En resume... 

Ce chapitre rompt la continuity des precedents : il n’a en effet pas utilise 
de composants XPCOM ! Le plus dur est passe maintenant et Ton 
s’achemine vers les ultimes chapitres. Les dernieres avancees en matiere 
d’interface ont ete definitivement validees : 

• un nouveau langage, XBL, nous a permis de definir un contenu 
generique, implementant ainsi un « nouveau widget » (par l’interme- 
diaire dune classe CSS) ; 

• ce widget possede ses propres proprietes, qui se modifient dynami- 
quement, ses methodes, ses champs ; 

• il est capable de reagir aux evenements ; 

• il est parfaitement integre dans la page principale de l’interface. 

Cependant et e’est la derniere limitation avant de rendre XUL Forum 
totalement fonctionnel, la liaison avec le serveur n’est pas etablie en ce 
qui concerne les sujets. Nous n’avons pour l’instant aucun moyen 
d’envoyer un nouveau sujet sur le serveur, ni d’en rapatrier les differentes 
reponses. 
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Nous pourrions bien sur utiliser une n-ieme fois RDF pour creer le con- 
tenu des cadres de sujet, mais ceci ne resout pas le probleme des commu- 
nications dans le sens client vers serveur ! Nous allons done voir une 
nouvelle methode de communication dans le chapitre suivant : les ser- 
vices web, tres en vogue a l’heure actuelle... 


POUR aller plus loin Ameliorer encore I'exemple du mini window manager 

Ce type de programmation en HTML, XUL, JavaScript et CSS est assez 
amusant : on obtient vite un resultat tres dynamique, tres « anime », 
pour une interface qui semble parfois austere. 

Une idee serait done de pousser le concept de gestionnaire de fenetres 
un peu plus loin : il serait ainsi possible d'ajouter une barre des taches 
dans laquelle se reduiraient les sujets minimises, d'implementer un redi- 
mensionnement pour les cadres de sujet... bref de rendre ce concept 
totalement professionnel ! 

Ceci existe deja et s'appelle Robin : le resultat est impressionnant techni- 
quement. C'est un vrai gestionnaire de fenetres en XUL, HTML, JavaScript 
et CSS ! 

► http://robin.sf.net 
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Les services web, pour une 
communication harmonieuse 
entre client et serveur 


En programmation, la communication est devenue essentielle. 
Nous travaillons dans un environnement connecte, oil des 
humains ont besoin de communiquer avec des programmes, 
mais aussi un environnement oil les programmes ont parfois 
besoin de communiquer entre eux ! 


SOMMAIRE 

► Le serveur SOAP en PHP5 

► Le client JavaScript : soap.js 

► L'interface utilisateur, 
elle aussi modifiee 

MOTS-CLES 

► Header, enveloppe SOAP 

► Types XSD 

► Persistance d'objets 
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Les protocoles de communication non-standards sont voues a l’echec. 
Les tentatives d’unification se multiplient : elles vont des projets Unix 

► http://en.wikipedia.org/wiki/Dbus comme DBus, un protocole unifiant les communications entre pro- 

grammes, a des projets orientes web, comme SOAP, qui standardise 
l’echange d’informations via le Web. 

Si vous voulez acceder a la meteo de votre region par exemple et l’afficher 
sur votre page personnelle, vous aurez besoin d’un service web. Votre lan- 
gage de generation de pages (PHP, ASP, Perl...) devra se connecter au site 
qui propose le service meteo et se faire comprendre pour obtenir la region 
demandee. On comprend alors tout l’interet des standards : l’enjeu con- 
siste a faire communiquer des applications differentes, des langages diffe- 
rents, des environnements differents... dune maniere codifiee, dans un 
standard rigoureux, permettant les echanges, sans se noyer dans une jungle 
de protocoles incompatibles. 

SOAP est l’une des reponses proposees : il signifie Standard Object 

► http://www.w3.org/TR/2003/ Access Protocol. II est le successeur de XML-RPC (XML-Remote 

REC-soap 12-part 1-20030624/ Procedure Call), au depart protocole d’appel de methodes distantes, tres 

simple, encode en XML, cree en partie par Microsoft. XML-RPC a ete 
retravaille et a evolue radicalement pour devenir un nouveau protocole : 
SOAP. Au depart soutenu par Microsoft, SOAP est maintenant pris en 
charge par le W3C. La derniere version est SOAP 1.2. Une requete 
SOAP typique consiste en un fichier XML (voir remarque) envoye par 
methode POST sur une page, qui interprete les donnees et renvoie dans 
le contenu une reponse, toujours au format XML. Dans notre cas, le 
client sera Mozilla et le serveur, PHP. 


OuilLS Configurer PHP 

II devient maintenant necessaire de configurer nous-memes PHP. Si vous gerez vous- 
meme la configuration de votre serveur, ce sera aise. Sous Unix, vous compilerez les 
sources avec Toption — enable-soap. Sous Windows, vous devrez enlever le « ; » 
devant la ligne extension=php_soap.dll pour activer celle-ci dans votre 
php.ini. Ce sera la meme procedure si vous utilisez des paquets tout prets, comme 
WAMP pour Windows. 

► http://www.wampserver.com 

Si par contre vous utilisez le mecanisme de votre distribution (sous Unix) pour avoir PHP, 
il faut vous referer aux manuels d'installation. Assurez-vous de bien disposer de la version 
5 de PHP. Par exemple, la distribution Debian, a I'heure de la redaction de ce livre, ne dis- 
pose toujours pas de PHP5. Vous devrez done peut-etre utiliser des sources alternatives, 
comme http://www.dotdeb.org. Installez ensuite I'extension SOAP, compilee en 
shared object pour permettre une installation separee. Pour la distribution Gentoo, il 
faut « demasquer » les ebuilds de PHP5, encore marques comme version instable 
{unstable), puis activer SOAP dans la variable USE. 
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Nous utilisons toujours la version 5 de PHP et cette fois ci, c’est au tra- 
vers de l’extension SOAP integree que sera mis en valeur le modele 
objet. Malgre quelques bogues dans sa jeunesse, cette extension devient 
tres stable, surtout dans la version 5.1 de PHP. Cependant, elle n’est pas 
presente par defaut, il faudra done penser a l’activer avant de commencer 
les tests ! 


SOAP en detail : application a XUL Forum 

Concretement, quelle va etre la logique des communications SOAP avec 
XUL Forum ? 

Le premier contact avec SOAP se fera lorsque l’utilisateur demandera a 
voir un message. En utilisant l’ID de ce message, qui est sous la forme 
http://www.xulforum.org/sujets/Hid du sujet]] eventuellement suivi de /messages/ 
[[id du message]], on pourra faire appel a la methode obtenf rMessage(uri 
du message) exposee par le serveur SOAP. Elle retournera bien sur les dif- 
ferents constituants du message, qui seront ensuite traites par JavaScript. 


Alternatives Comment se passer de SOAP ? 

Nous choisissons d'illustrer la communication du 
client vers le serveur via SOAP. II existe cependant 
d'autres methodes. 

• La plus simple est sans doute I'utilisation de la 
methode GET : en appelant, avec un 
XMLHttpRequest, I'URL http://www.example.com/ 
monserveur . php?l eti tredumessage=XXX&l econte 
nudumessage=XXX on peut passer au serveur des 
variables, recuperables grace au tableau $_GET en 
PHP par exemple. Inconvenient : une URL ne peut 
pas depasser 255 caracteres. 

• Une methode POST : on recree de toutes pieces la 
requete, en simulant I'envoi d'un formulaire HTML. 
II faut bien sur se plonger dans les normes RFC qui 
definissent la maniere d'encoder un formulaire et 
une fois la requete construite, on I'envoie a I'aide 
de XMLHttpRequest (mais cette fois-ci en mode 
POST, un mode que nous n'avons pas eu I'occasion 
d'elucider dans cet ouvrage). Le wiki XULFr vous 
permettra, encore un fois, d'approfondir cette 
methode (utilisable par exemple pour une page 
d'inscription directement integree a I'extension : 
on pourrait ainsi recreer le formulaire utilise sur le 


site web et meme envoyer un fichier !). L'inconve- 
nient est cependant une tres grosse utilisation des 
composants XPCOM des lors qu'il s'agit d'envoyer 
un fichier. De plus, une bonne connaissance des 
protocoles HTTP est requise. 

► http://xulfr.org/wiki/ApplisWeb/Request 

• Toujours dans les services web, Mozilla inclut une 
API XML-RPC. Avec I'extension de PHP dediee a cet 
effet, il serait possible de repenser ce chapitre en 
fonction de XML-RPC. Cependant et e'est la I'incon- 
venient majeur, ce ne sont que des composants 
XPCOM qui sont proposes (et non pas des objets 
JavaScript instanciables comme avec SOAP : var 
appel = new SOAPCall;) 

• Encore et toujours, I'alternative AJAX. Mais, et nous 
ne le repeterons jamais assez, pourquoi s'encombrer 
d'une nouvelle methode de communication alors 
que SOAP existe deja ? Si vous etes tente, vous 
pourrez neanmoins essayer des bibliotheques 
dediees comme OpenRico (pour des pages web 
cependant). 

► http://openrico.org/home.page 
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L’enregistrement d’un message se fera de meme : ce sera la fonction 
enregi strerMessage(ti tre , texte, auteur, date, uri du sujet). L’URI 
du sujet sera nul si c’est un nouveau sujet ; dans le cas contraire, il con- 
tiendra l’URI du sujet auquel repond le message. 

Nous aurons aussi besoin dune identification SOAP. En effet, pour des 
questions de securite, nous devons verifier l’identite d’un utilisateur avant 
d’enregistrer des messages sous son nom dans la base de donnees. En 
effet, un autre client SOAP malveillant pourrait, si nous ne demandions 
pas l’identite du posteur, enregistrer des messages sous un faux nom. 

Une premiere reponse a ce probleme serait, lors d’appel a des fonctions 
necessitant une identification, comme enregistrer un message, de fournir 
a la fonction le nom d’utilisateur et le mot de passe deja donnes au 
depart. Mais alors un nouveau probleme se pose : comment transmettre 
le nom d’utilisateur et le mot de passe, de xul forum. xul a index. xul ? 
Via l’URL ? Solution peu elegante... Redemander a l’utilisateur de 
s’identifier sur la seconde page ? Ce serait contraire a la logique de XUL 
Forum qui veut que toute l’identification se passe dans xul forum . xul . 

Nous allons done utiliser une fonctionnalite fort utile de PHP5 : la per- 
sistance des objets. 


Culture A quoi ressemble un appel SOAP ? 


Un appel SOAP utilise plusieurs espaces de 
nommage : XSD pour definir les differents 
types (chaine, entier) selon XML, SOAP- 
ENC pour I'encodage d'une requete SOAP, 
SOAP-ENV pour les elements structured de 
la requete et NS1 , qui correspond en fait a 
I'URI du serveur. 


<S0AP- ENV : Envel ope SOAP- ENV : 

encodi ngStyl e="http : //schemas . xml soap . org/ soap/ encodi ng/" 

xml ns : SOAP- ENC=" htt p : //schemas .xml soap.org/soap/encodi ng/" 

xml ns : SOAP- ENV=" htt p : //schemas .xml soap.org/soap/envelope/" 

xml ns : nsl="http ://www. xul forum .org/xf Serveur" 

xmlns :xsd="http://www.w3 . org/2001/XMLSchema" 

xml ns :xsi ="http ://www.w3 . org/2001/XMLSchema-i nstance"> 


Ceci est une requete creee automatique- 
ment par un client PHP pour I'appel de la 
methode identification, avec comme para- 
metres le DN et le mot de passe de I'utili- 
sateur. 


<SOAP- ENV : Body> 


<nsl: identi fi cation> 

<paramO xsi : type="xsd : stri ng"> 


uid= Jonathan ,ou=util isateurs,o=xul forum 

</paramO> 

<paraml xsi : type="xsd : stri ng">*****</paraml> 


On retrouve une enveloppe SOAP, le corps 
du message et, dedans, la requete pour la 
methode identification (le nom NS1 est 
engendre automatiquement, de meme que 
les noms des parametres). Les deux para- 
metres sont de types chaine (precise grace 
a XSD) et leur valeur est bien sur encodee 
en Unicode (toutes les requetes SOAP se 
feront en Unicode dans ce chapitre, enco- 
dage par defaut des deux parties, Mozilla 
et PHP). 


</SOAP-ENV : Envel ope> 


</nsl : i denti f i cati on> 
</SOAP-ENV:Body> 
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L’idee est la suivante : du cote de PHP, on cree un objet caracteristique 
dune session SOAP ; il sera garde en l’etat durant tout une meme ses- 
sion. Du cote de Mozilla, d’abord on s’identifie et, sous reserve de succes, 
une propriete de l’objet PHP est marquee comme indiquant que l’utilisa- 
teur a bel et bien ete identifie. Des fonctions utilitaires permettront de 
recuperer les informations caracteristiques de la session serveur : elles 
seront transmises a index. xul via l’URL (ou via les cookies de Mozilla). 
Ensuite, au prochain appel, sur index. xul, par exemple pour poster un 
message, le serveur « verra » que l’objet, qui a ete garde tel quel, a sa pro- 
priete identOk marquee a true. L’utilisateur s’est done identifie par le 
passe : on peut enregistrer le message sous son nom sans crainte. 


Alternatives La vie sans PHP5 
et son extension SOAP 

Pour ceux qui ne peuvent pas ou ne veulent pas 
utiliser I'extension livree avec PHP5, il existe 
une dasse PEAR::SOAP, ou meme une dasse 
NuSOAP qui permettent toutes deux de creer 
des clients ou serveurs SOAP. Ce sont les plus 
connues. 

► http://pear.php.net/package/SOAP 

► http://dietrich.ganx4.com/nusoap/ 


Le serveur en pratique avec PHP5 

Il est temps de mettre en pratique ce fonctionnement theorique : ce sera 
le fichier soap.php. 


Le serveur, vue globale 


<?php 

error_reporti ng(E_STRICT) ; 
i ncl ude(" ./gl obal . i nc . php") ; 

class xfServeur { 


private SdejaVu = 0; 
private SidentOk = 0; 


private $db; 

private SldapHost, SmysqlHost, SmysqlUser, SmysqlPass; 


function construct($pLdapHost, SpMysqlHost, SpMysqlUser, 

SpMysqlPass) { 

/* initialisation de tout ce qui concerne les sessions */ 
session_start() ; 

/* pour mysql */ 

$thi s->mysql Host = SpMysqlHost; 

$thi s->mysql User = SpMysqlUser; 

$thi s->mysql Pass = SpMysqlPass; 

/* pour ldap */ 

$thi s->l dapHost = SpLdapHost; 


< Pour plus de rigueur, nous voulons voir toutes 
les erreurs. Pour plus de darte, les informations 
de connexion sont placees dans un fichier a part. 

< La dasse, une fois instanciee, formera un objet 
qui sera conserve durant toute la session SOAP. 

< Deux variables utilitaires. La premiere permet de 
determiner si e'est la premiere fois que I'objet 
est cree dans la session (valeur 0 par defaut, 
sinon valeur 1). La seconde permet de determi- 
ner si une identification reussie a deja eu lieu 
dans cette session ou non. 

< Les variables membres sont conservees mais pas 
les ressources, qui durent le temps d'un script. II 
faudra done a chaque fois recreer la connexion a 
la base de donnees (variable db) et pouvoir con- 
naitre les informations de configuration. 

< Le constructeur est appele a chaque fois que I'on 
instancie I'objet. On demarre la session, on 
passe les informations servant a la connexion 
dans les variables membres et I'on est pret pour 
servir les differentes requetes ! 
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L’identification sera detaillee plus loin : elle ► 
accepte bien sur le nom (le DN) et le mot de 
passe de I'utilisateur. 

Cette autre fonction utilitaire renvoie des infor- ► 
mations sur la session : elle permettra, entre 
autres, de savoir si la session dont le client a les 
references n'est pas « perimee ». 

L'unique parametre est I'URI du message voulu, ► 
par exemple http://www.xufforum.org/ 
sujets/1/ 

Pour enregistrer un message. II y aura bien sur ► 
une verification prealable sur $this-> 
i dentOk avant de proceder a I'enregistrement 
du message. 

Une autre fonction utilitaire, qui permet d'etablir > 
la connexion a la base de donnees avant toute 
operation sur cette derniere. La dasse 
SOAPFault est tres pratique pour envoyer 
simplement des messages d'erreur SOAP. Notez 
bien que le fichier PHP est edite au format 
Unicode, pour que les accents dans les erreurs 
SOAP soient eux aussi en Unicode. Pour la 
deuxieme erreur, c'est le message d’erreur 
MySQL, plus parlant, qui estfourni. 


Une derniere fonction utilitaire : avant de retour- ► 
ner les resultats de la base de donnees (qui elle 
est en latinl), il faut les encoder en Unicode, par 
I'intermediaire de la fonction PHP 
utf8_encode. 


Une sous-fonction : lorsqu'on demande a visua- ► 
liser un message, ce sera soit un sujet,... 


public function identification($pNom, SpPass) { 

} 


public function infosSessionO { 

return array(session_name() , session_id(), $this->identOk) ; 

} 


public function obteni rMessage($pMsg) { 

} 

public function enregistrerMessage($titre, Stexte, Sauteur, 
$date, $sld) { 

} 


private function _connecterMySQL() { 
if ($this->db != null) return; 

$this->db = @mysql_connect($thi s->mysqlHost , 

$ t hi s->mysql User , $thi s->mysql Pass) ; 
if (!$this->db) 

throw new SOAPFault("SOAP:Server/SQL" , 

"Impossible de se connecter a la base de donnees"); 
$r = @mysql_query ("USE Jonathan", $this->db); 
if (!$r) 

throw new SOAPFault("SOAP:Server/SQL" , 
mysql_error($thi s->db)) ; 

} 

private function _toutEnUnicode($o) { 
foreach ($o as $p => $v) { 

$o[$p] = utf8_encode($v) ; 

} 

return $o; 

} 

private function _chercherSujet($sId) { 

} 


... soit un message. Les fonctions adaptent en ► 
fait la requete MySQL a utiliser. 

La dasse est fermee. ► 

Maintenant, voici les instructions executees a ► 
chaque lancement du script. On cree un nouveau 
serveur (le premier parametre sera explicite plus 
loin dans ce chapitre), avec I'URI I'identifiant. On 
lui associe la dasse xfServeur, dont les 
methodes publiques deviennent des methodes 
du serveur SOAP (les parametres passes apres le 
nom de la dasse sont transmis au constructeur). 

On indique aussi que I'objet xfServeur doit 
persister durant toute la session. 


private function _chercherMessage($sId , $mld) { 

} 


} 

$s = new SOAPServer(nul 1 , array('uri' => 

1 http://www.xul forum.org/xfServeur')) ; 
$s->setClass("xfServeur" , SldapHost, SmysqlHost, SmysqlUser, 
Smysql Pass) ; 

$s->setPersistence(SOAP_PERSISTENCE_SESSION) ; 
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if ($_SERVER[ 1 REQUEST_METHOD'] == "POST") { 

$s->handl e() ; 

} 

el se { 

header("Content-type : text/plain") ; 

echo "Fonctions supportees par ce serveur SOAP : \n" ; 
foreach($s->getFunctions() as $f) 
echo $f."\n"; 

} 

?> 


< SOAP procede par methode POST. Si I’on a a 
faire a une requete de ce type, le serveur doit 
entrer en action. 

< Si ce n’est pas le cas, on envoie en texte brut la 
liste des fonctions proposees par le serveur. 


* Fin du fichier PHP. 


La simplicite est redoutable : il n’y a pas besoin de tenir a jour une liste des 
fonctions du serveur SOAP, des parametres qu’elles acceptent, qu’elles 
retournent... il suffit d’ecrire les methodes de la classe et de declarer celles- 
ci comme publiques. Cette simplicite a cependant une contrepartie, que 
nous verrons au moment d’analyser les resultats avec JavaScript. 


Permettre I’authentification de l’utilisateur 

La methode identification est indispensable : si vous avez bien com- 
pris la logique precedente, elle ne presente aucune difficult^. 

public function identification($pNom , SpPass) { 
if (SpNom == null && SpPass == null) return 0; O 
if ($this->dejaVu && $thi s->ident0k) { 

return 1; Q 

} else { 

$1 = @ldap_connect($this->ldapHost) ; 
if ( ! $1) 

throw new SoapFault("SOAP:Server" , 

"Impossible de se connecter a LDAP"); 
@ldap_set_option($l , LDAP_0PT_PR0T0C0L_VERSI0N , 3); 

$b = @ldap_bind($l , SpNom, SpPass) ; Q 

1 dap_close($l ) ; 

$this->dejaVu = 1; O 
if (Sb) { 

Sthi s->i dentOk = 1; 

return 1; © 

} else { 

Sthi s->i dentOk = 0; 

return 0; Q 

} 

} 

} 


Alternatives addFunctionO 

On peut se passer de la notion de classe et ajouter 
ses fonctions via la methode addFunction, qui 
accepte le nom d’une fonction, un tableau de 
noms de fonctions, ou la constante 
S0AP_FUNCTI0N_ALL. Cependant, on perd la per- 
sistence et, de plus, I'utilisation de la constante 
S0AP_FUNCTI0N_ALL enregistre toutes les fonc- 
tions de PHP disponibles I A deconseiller bien sur... 


Si les deux parametres passes sont vides Q, on retourne faux, car on ne 
veut pas d’une identification anonyme. De meme, si l’utilisateur a deja 
utilise cet objet et qu’une identification precedente a reussi Q, on 
retourne vrai. 
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Si aucun de ces deux cas n’est verifie, il faut proceder a une identification 
LDAP. On se connecte, on utilise la version 3 du protocole 
(qu’OpenLDAP utilise) et on garde les resultats de l’identification 0 
dans la variable b. 

Si l’identification a reussi, on modifie la variable identOk en conse- 
quence et Ton retourne vrai 0 , sinon, on retourne faux 0 . Dans les deux 
cas, on enregistre le passage de l’utilisateur © : il pourra servir par 
exemple a des statistiques, comme le nombre d’appels SOAP deja effec- 
tues... (on utilisera alors $this->dejaVu++;). 


Lire un message 

Une fois sur i ndex . xul et correctement identifie, l’utilisateur doit etre en 
mesure de recuperer un message : c’est la fonction obteni rMessagef). 

public function obteni rMessage($pMsg) { 

$parties = explode("/", $pMsg) ; © 

if (count($parties) == 4 | | count($parties) == 5) { 0 
//pour prendre en compte le / final 
$sld = $parti es [4] ; 

$sujet = $this->_chercherSujet($sId) ; 0 
return $sujet; 

} else if (count($parties) == 6 | | count(Sparties) == 7) { © 
$sld = $parti es [4] ; 

$mld = $parties[6]; 

$message = $thi s->_chercherMessage($sId , $mld) ; 0 
return $message; 

} el se { 0 

throw new SOAPFault("SOAP:Serveur" , 

"URI de message ou sujet demande inconnue"); 

} 

} 

Le principe est tres simple : on separe les constituants de l’URI © selon 
le separateur « / », via la fonction expl ode. 

jonathan@daisy ~ $ php -a 
Interactive mode enabled 

<?php 

pri nt_r (expl ode ("/" , "http://www.xul forum. org/sujets/O/")) ; 
Array 

C 

[0] => http: 

[ 1 ] => 

[2] => www.xulforum.org 

[3] => sujets 

[4] => 0 

[5] => 

) 
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Si la longueur correspond a celle d’un sujet 0 , on appelle la methode 
utilitaire _chercherSujet() 0 . Si la longueur correspond a celle d’un 
message Q, c’est ce message en particulier que Ton va chercher via 
_chercherMessage() 0 . Si la longueur n’est pas reconnue, on lance une 
erreur 0 . 

Nous ne detaillerons que la methode _chercherMessage(), car 
_chercherSujet() est exactement similaire. 


private function _chercherMessage($sId , $mld) { 

$thi s->_connecterMySQL() ; 

$r = @mysql_query("SELECT titre,texte, auteur, date 

FROM xf_messages WHERE s_id='$sld' AND id='$mld"', 

$thi s->db) ; 
if (!$r) 

throw new SOAPFaul t("S0AP : Server/SQL" , 
mysq1_error($thi s->db)) ; 

return $this->_toutEnUnicode(@mysq"l_fetch_row($r)) ; 

} 

La seule chose a remarquer ici est le type de retour : c’est un tableau ne 
contenant que des index (fonction mysq1_fetch_row ; mysq1_fetch_array 
renvoie un tableau associatif avec en cles les noms des champs et 
mysq1_fetch_object un objet). L’index 0 contiendra le titre, l’index 1 le 
texte et ainsi de suite, dans l’ordre des champs demandes via la requete 
MySQL. On specifie deux conditions, que l’ID du sujet et que l’ID du 
message soient tous les deux bons. Ceci rajoute une securite supplemen- 
taire quant a l’exactitude des relations sujet / message. 


Astuce 

Conventions de codage, underscore 

Vous I’aurez remarque, tout ce qui est prive est 
prefixe par un signe _ (underscore) dans ce cha- 
pitre. C’est en fait une convention de codage par- 
fois utilisee en C, permettant de distinguer les 
fonctions qui sont utilisees seulement au sein d’un 
fichier et celles qui sont utilisables par les autres 
fichiers. 

Ainsi, dans soap, js, toutes les routines qui ne 
sortiront pas du cadre de ce meme fichier com- 
menceront par_, tandis que les fonctions appelees 
depuis les scripts principaux, forum.js ou 
identification, js, ne possederont pas ce 
caractere underscore. 


Enregistrer un message 

Enfin, derniere methode, tres utile, celle qui permet d’enregistrer un 
message. 

public function enregistrerMessage($ti tre , $texte, $auteur, 
$date, $sld) { 
if (! $this->identOk) 

throw new SOAPFault("SOAP-ENV:Server" , 

"Pas identifie, veuillez reessayer !"); 0 
$thi s->_connecterMySQL() ; 

$texte = stri p_tags($texte , 

"<b> <u> <i> <a> <ul> <li> <ol>"); 

Stitre = adds) ashes(utf8_decode($ti tre)) ; 

$texte = adds) ashes(utf8_decode($texte)) ; 

$texte = nl 2br($texte) ; 0 

Jauteur = addslashes(utf8_decode($auteur)) ; 

if (!$sld) { 0 

$r = @mysql_query( 

"INSERT INTO xf_sujets (ti t re , texte, auteur, date) 
VALUES('$titre' , '$texte\ ’Jauteur', NOWQ)"); 
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if ( ! $r) 

throw new S0APFau1t("Server : SQL" , mysql_error()) ; 

} else { © 

Sparties = explode("/", $sld) ; 

$sld = $parties[4]; 

$r = @mysql_query("INSERT INTO xf_messages( 

**■ s_id, titre, texte, auteur, date) VALUES 

( ' $sld ' , 1 $titre ' , '$texte', 'Sauteur', NOW())"); 

if ( ! $r) 0 

throw new SOAPFaul t("Server : SQL" , mysql_error()) ; 

} 

} 

Tout d’abord, si on n’est pas identifie Q, le serveur refuse d’enregistrer le 
message. Ensuite, on applique quelques transformations aux parametres 
fournis 0 : le HTML est autorise, mais seulement pour une liste de 
balises reduite. La base de donnees est en latin-1. On ne doit pas lui 
donner des informations en Unicode : on decode done FUTL8. Enfin, 
les sauts de lignes doivent etre convertis en balises <br /> : e’est la fonc- 
tion nl 2br, « new line to br ». C’est en effet du HTML que nous stocke- 
rons dans la base de donnees. Si ce message n’est pas en reponse a un 
sujet particulier 0 , c’est que c’est un nouveau sujet. On insere done une 
nouvelle valeur dans la table xf_sujets et la date courante est obtenue 
grace a la fonction MySQL N0W() qui permet de remplir des champs 
DATE et DATETIME. 


Astuce Tester souvent, par petits morceaux 

Ces fonctions n'ont pas encore ete mises en relation avec I'inter- 
face XUL : vous pouvez done et e'est une bonne pratique, effectuer 
lors de vos developpements ce que I'on appelle des tests unitaires. 
L'ideal est d'ecrire en premier une suite de fonctions decrivant le 
comportement attendu du fichier soap . j s. 


Ainsi, en reflechissant aux valeurs de retour, aux parametres 
acceptes, vous pourrez avoir une vision claire des fonctions SOAP, 
plus efficace qu'un tatonnement exigeant de nombreux remanie- 
ments ulterieurs. Par exemple : 


initialiserSoap("jonathan") ; 

dump(i denti fi erSoap("uid=jonathan , ou=uti 1 i sateurs ,o=xul forum" , "*****")+"\n") ; 

//on attend vrai 

var r = veri fi erSessi onSoapO ; 

if (r) 

dump(gPhpSessName+"="+gPhpSessId+" "+r[2]+"\n") ; //on attend PHPSESSID=XXX suivi de 1 
obteni rMessageSoap("http ://www. xul forum .org/su jet s/2/messages/3/") ; 

//on peut aussi mettre des dumpO di rectement dans obteni rMessageSoap 

posterMessageSoap("Ti tre d'un message", "Un texte", "http://www.xulforum.Org/sujets/l/"); 
//verifier dans la base de donnees si ga a bien marche 


Ainsi, on verra au fur et a mesure si les fonctions adoptent bien le 
comportement attendu et dans le cas d’une erreur, on aura de 
suite le test permettant de la detecter, test facilement modifiable. 
Si I'on avait de suite teste soap, js depuis les fichiers XUL, les 


erreurs auraient ete beaucoup plus difficiles a detecter : la succes- 
sion des fonctions aurait ete edatee sur plusieurs autres proce- 
dures, les informations affichees sur la console auraient ete moins 
faciles a identifier, au milieu d'autres messages... 
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Si ce message est en reponse a un sujet particulier Q, on recupere l’iden- 
tifiant du sujet au milieu de son URI et on cree la bonne requete, pour la 
table xfLmessages cette fois-ci. Enfin, s’il y a eu une erreur, on en 
informe le client par l’intermediaire dune faute SOAP 0 . Tout ce trai- 
tement PHP est en fait assez « classique » : il faut juste bien comprendre 
le mecanisme des objets persistants et bien implementer les requetes et 
l’identification. Le gros du travail va se faire ensuite, ce sera dans Mozilla. 


Le client JavaScript 

Ceci sera le dernier fichier JavaScript que nous ecrirons dans content : il 
s’appellera soap, js et contiendra toutes les routines de traitement SOAP 
Les differentes parties seront en fait des echos aux methodes du serveur 
PHP : il y a des correspondances entre les deux. Nous allons voir com- 
ment proceder a l’identification, au rapatriement d’un message et a 
l’enregistrement d’un message ou d’un sujet. 

L’initialisation 

De meme qu’au chapitre 10 nous avons initialise LDAP, nous allons ici 
aussi offrir une fonction d’initialisation SOAP. 

var gPhpSessName ; 
var gPhpSessId; 
var gAuteur; 

function initialiserSoap(pAuteur, pPhpSessName , pPhpSessId) { 

netscape . securi ty . Pri vi 1 egeManager . enabl ePri vil ege( 

"Universal BrowserRead") ; 

gAuteur = pAuteur; 
if (arguments. length == 3) { 
gPhpSessName = pPhpSessName; 
gPhpSessId = pPhpSessId; 

verifierSessionSoapO ; 

} else { 

var r = verifierSessionSoapO; 

gPhpSessName = r [0] ; 
gPhpSessId = r [ 1] ; 

} 

} 

Cette fonction sera appelee avant tout traitement SOAP. Elle prend un 
nombre variable d’arguments : s’il y en a trois, cela signifie que c’est la 
page index. xul qui initialise SOAP, car elle possede deja les identifiants 
de session, recuperes sur xul forum. xul. On place done ces identifiants de 
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session dans des variables globales et on verifie que la session est toujours 
valide. Si Ton est sur xul forum. xul, on n’a pas encore d’identifiant de 
session : il faut done en obtenir un et le garder via les variables globales. 

La premiere ligne, heritage du code original de Netscape, indique que le 
navigateur a besoin de certains privileges pour que les objets JavaScript 
ne soient pas genes dans leurs actions de rapatriement ou d’envoi 
d’informations depuis ou sur le serveur. Les composants XPCOM n’ont 
pas ce probleme car ils ne sont autorises que pour les extensions, on est 
done en terrain autorise si Ton fait appel a une methode d’un composant 
XPCOM. 

Est-on en phase avec le serveur ? 

Verification de la session 

II faut d'abord verifier si la fonction n'a pas ► 
retourne faux avant d'acceder aux differents 
index du tableau de retour. 


La fonction permettant de verifier les informations de session se con- 
tente d’appeler 0 , grace a une routine interne, la methode infos Session 
du serveur. Elle verifie que cet appel n’a pas echoue 0 et effectue ensuite 
un traitement un peu particulier. 

Normalement, le serveur PHP renvoie un tableau indexe. En pratique, 
e’est une liste de valeurs separees par des virgules qui arrive en 
JavaScript. Pour retablir le tableau original, il faut separer cette chaine en 
suivant le delimiteur « , » 0 . La variable valeurs contient alors le 
tableau qui a ete reellement envoye par PHP. Si ce sont des informations 
de session differentes de ce que nous avons deja, nous mettons a jour nos 
variables globales Q. 

Dernier point, il faut transformer la chaine correspondant a la variable 
identOk en booleen @, car nous allons effectuer des tests conditionnels 
dessus. En effet, une chaine comme "0" renvoie « vrai » dans un test, car 
ce n’est pas une chaine vide. Finalement, on retourne le tableau conte- 
nant les informations de session 0 . 


function verifierSessionSoapO { 

var retour = _appelSoap("infosSession" , {}) ; 0 
if (! retour) return false; 0 

var valeurs = Stri ng(retour[0] .value) .split(" ,") ; 0 
if (valeurs [1] != gPhpSessId) { 0 
gPhpSessName = valeurs[0]; 
gPhpSessId = valeurs[l]; 

} 

valeurs[2] = Number(val eurs [2] ) ; 0 

return valeurs; 0 
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Pas de duplication de code : une routine pour tous nos 
appels SOAP 

function _transportUri () { 
return 'http://'+ 

gConfi g . php . hote+gConfi g . php . chemi n+' soap . php? '+ 
gPhpSessName+"="+gPhpSessId ; 


function _appelSoap(methode, parametres) { 

document . get El ementById("xf- status bar- prog res") . 

** setAttribute("mode" , "undetermined"); Q 

var appel = new SOAPCall () ; Q 
appel .transportURI = _transportUri () ; Q 
var p = new ArrayO ; 
var i = 0; 

for (a in parametres) 

p[i++] = new SOAPParameterCparametres [a] , a); 
appel .encode(0, methode, "http://www.xulforum.org/xfServeur", 

0, null, p. length, p) ; Q 

var r = appel . invoke() ; 0 

document . get El ementById("xf- status bar-prog res") . 

** setAttribute("mode" , "determined"); 0 

if (r. fault) { //nsISoapFault 0 

ajouterErreur (gStri ngBundl e . getFormattedStri ng( 

"erreurSoap" , new Array(Stri ng(r. fault. faultCode) , 

String (r. fault. faultstring)))) ; 
return false; 

} else { 

return r.getParameters (false, {}) ; 0 

} 

} 

C’est dans cette routine que nous manipulons vraiment les objets SOAP. 

II faut tout d’abord preciser que tout se fait en mode synchrone : la ver- 
sion asynchrone est decrite en remarque. On place done le progress- 
meter en mode indetermine, pour indiquer qu’une action est en cours Q. 

Ensuite, on instancie un objet SOAPCall, a la base des fonctions SOAP 
de Mozilla 0 . On lui indique l’adresse de la page serveur a laquelle il 
doit envoyer les informations 0 , puis on precede a un traitement per- 
mettant de transformer un objet de type { "nomduparametre" : 
valeurduparametre } en tableau d’objets SOAPParameter. Ceci permet 
de masquer les sous-traitements SOAP et d’autoriser des appels simpli- 
fies depuis les autres fonctions de soap, js, car la syntaxe objet est plus 
modulable et plus simple que la construction d’un tableau d’objets 
SOAP. Vous remarquerez que lorsqu’on encode la requete, on precise 
aussi l’URI du serveur, deja rentre dans le serveur PHP Q. 
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Une fois que tout est pret, on peut lancer la requete : on l’« invoque » 0 . 
Lorsqu’elle est terminee, on arrete le defilement Q. 

II faut maintenant verifier ce que l’appel nous a renvoye. Si c’est un 
booleen faux 0, il y a eu erreur et on le signale a l’utilisateur. Si tout est 
bon, on demande a obtenir les parametres de retour, via la methode 
getParametersC). Bien qu’envoyes par PHP, ils sont, eux aussi, des ins- 
tances de l’objet SOAPParameter ; on les renvoie a la fonction appelante 
via l’instruction return 0. 

La valeur d’un parametre SOAP est accessible via sa propriete val ue : 
c’est ce qui a ete fait plus haut, lorsqu’il s’agissait d’obtenir des informa- 
tions sur une session. 


Alternative Appels SOAP asynchrones 

Au lieu d'utiliser SOAPCall : :invoke(), il est possible d'utiliser son equivalent 
asynchrone : SOAPCal 1 : : aSyncInvokeO. Son unique argument est une fonction, a 
laquelle seront transmis trois parametres : 

• I'objet SOAPResponse retourne ; 

• I'objet SOAPCal 1 a I'origine de I'appel ; 

• un code de retour : 0 indique le succes, une valeur autre indique un echec. 

On pourra done ecrire : 

function callback(r, c, e) { 

//trai tement . . . 

} 

appel .aSyncInvoke(callback) ; 

Les methodes asynchrones sont generalement recommandees, toujours pour la meme 
raison : ne pas geler I'affichage. 


Culture Les differents parametres de invoked et getParametersQ expliques 


La methode i nvokeO accepte de nombreux parametres : 

• La version SOAP, determinee par une constante. 

► http://xulplanet.com/references/objref/SOAPCall.html 

• Le nom de la methode et I'URI du serveur appele, tous deux 
vus dans notre cas. 

• Le nombre de blocs d'en-tete (header). 

• Un tableau similaire a celui utilise pour les parametres, mais 
avec des objets SOAPHeaderBl ock cette fois-ci. Les en-tetes 
peuvent etre utilises pour passer des parametres comme une 
langue preferee, un format d'image demande, a la maniere des 
en-tetes HTTP. 

• Le nombre de parametres et le tableau les contenant, tous 
deux vus dans notre exemple. 


La methode getParametersC) accepte quant a elle deux 
arguments : 

• Le premier est un booleen. S’il est vrai, e'est un document 
DOM qui est retourne, dont I'analyse pourra etre faite pour 
extraire nous-memes les parametres. S'il est faux, I'extension 
SOAP doit elle-meme tenter de recuperer les parametres et les 
analyser (d'ou les incorrections rencontrees avec les tableaux 
retournes par PHP). En mettant sa valeur a vrai, on pourra 
tenter de recreer les types de PHP, comme les tableaux associa- 
tes ou les objets, en faisant une analyse DOM. 

► http://www.onlamp.eom/pub/a/onlamp/2005/06/23/ 
mozsoap.html). 

• Le second parametre est un objet, amene a contenir le nombre 
de parametres re^us. Nous n'en avons pas I’utilite car nous 
savons le nombre de parametres retournes. 
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Le moment crucial : 1’ identification 


function identifierSoap(pUti"lisateur, pPass) { 
var retour = _appel SoapC'i denti fi cati on" , 

{ "paramO" : pUti 1 i sateur , "paraml" : pPass }) ; 
if (! retour) return false; 
var valeur = Number (retour [0] .val ue) ; 

if (valeur == 1) { 

dumpC'Identi fi cati on reussie pour "+pUti 1 i sateur+ 
"/"+pPass+"\n") ; 
return true; 

} else { 

ajouterErreur (gStri ngBundl e . getStri ng("i denti fi cati onEchec")) ; 
return false; 

} 

} 

La procedure d’identification ne fait que reutiliser ce qui a ete vu 
precedemment : on appelle la methode du serveur avec les parametres 
(dont le nom importe peu puisque ni PHP, ni JavaScript ne s’en sou- 
cient) requis : DN et mot de passe de l’utilisateur. On verifie le resultat 
qui nous est fourni, on le transforme en nombre et on agit en 
consequence : valeur de retour true si succes, erreur et return false en 
cas d’echec. 


Indispensable : lire un message 

function obteni rMessageSoap(pUri ) { 

var r = _appel SoapC'obteni rMessage" , { "paraml" : pUri }) ; 
if ( ! r) 

return false; 

var o = r[0] .value. sli ce(" ; 

return {"titre" : o[0] , "texte" : o[l] , "auteur" : o[2] , 
"date" : o[3] }; 


II n’y a ici qu’une variante : on retourne un objet plutot qu’un tableau, 
pour plus de clarte dans les traitements futurs. 


227 


www.frenchpdf.com 


12 - Les services web, pour une communication harmonieuse entre client et 


Les Cahiers du programmeur 


Vital : poster nos propres messages 

function posterMessageSoap(pTi tre , pTexte, pSId) { 

var v = verifierSessionSoapO ; 

if C'v) { 

ajouterErreurfgStri ngBundle .GetStri ng("pasldenti fi e")) ; 
return false; 

} 

if C ! v [2] ) { 

ajouterErreur(gStri ngBundle .GetStri ng("pasldenti fi e")) ; 
return false; 

} 

var r = _appe1 Soap("enregi strerMessage" , { 

"paramO" : pTitre, 

"paraml" : pTexte, 

"param2" : gAuteur, 

"paramB" : nul 1 , 

"param4" : pSId 

}); 

return r; 

} 

Cette derniere fonction necessite plus de verifications : 

• d’abord, est-ce que le rapatriement des infos session a reussi ? 

• si oui, sommes-nous identifie ? 

Si l’une de ces deux conditions n’est pas satisfaite, on arrete immediate- 
ment la fonction. Dans le cas contraire, on appelle la fonction serveur et 
on renvoie la variable r, representant le succes de l’operation 
« enregistrement du message ». 


Pour aller plus loin Autres f onctions 

II y a bien sur les autres fonctions a implementer : edition d'un sujet et suppression, 
nombre de messages au total, nombre de messages non lus... Pour les deux premieres, 
une double verification sera necessaire, cote Mozilla et cote serveur. Bien sur, si le nom 
d'utilisateur est « Jonathan », la suppression et la modification seront possibles pour tous 
les messages... 

Plus serieusement, un vrai systeme d'identification consisterait a definir un champ special 
dans I'annuaire LDAP, qui indiquerait si la personne est ou non administrateur. Une veri- 
fication rapide sur ce champ au moment de permettre la modification / suppression d'un 
message serait une bonne maniere de rendre compte du statut « administrateurs du 
forum ». 
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Les modifications de I’interface avec XUL 


En fait, la majeure partie des modifications va se concentrer dans le 
widget XBL vu precedemment. Nous allons rajouter un bouton R accole 
a la croix permettant de quitter et, suite a un double-clic sur ce R, le 
widget se transformera en champ de formulaire pour saisir un message. 



Figure 12-1 La fenetre de saisie d'une reponse 


Changements dans le fichier XBL 

Les manipulations DOM sont tres similaires a celles que nous avons 
vues dans le chapitre precedent : l’astuce qui consiste a utiliser la classe 
d’un element au lieu de son ID pour l’identifier est toujours valable. Car 
il faut bien garder a l’esprit que dans un document XML, un ID est 
unique. Or il y a plusieurs widgets fenetreMsg, done plusieurs cases 
« nouveau sujet » a cocher et ce pour le meme document index. xul. Il 
est done impossible d’utiliser l’attribut ID sur les enfants d’un widget 
XBL. 
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Figure 12-2 Le message qui en resulte 

Nous ne detaillerons pas les manipulations DOM, consistant a trans- 
former une fenetre de visualisation d’un message en fenetre de reponse et 
vice-versa : ce ne serait que du discours inutile. En revanche, la nature 
du formulaire est plus interessante. II est place bien sur dans la balise 
<content> du widget XBL. 


Le formulaire XUL de reponse a un message, place dans le widget XBL 

<xul : vbox> 

<xul : textbox class="texteTitre" styl e="wi dth : 200px;"/> 
<xul : textbox class="texteTexte" multiline="true" rows="8" 
styl e="wi dth : 200px" /> 

<xul : checkbox label="Nouveau sujet ?" checked="fal se" 
cl ass="cocheSujet" /> 

<xul : hbox> 

<xul:button label="0K" cl ass="boutonOk" /> 

<xul:button label="Cancel " cl ass="boutonAnnul er" /> 
</xul : hbox> 

</xul : vbox> 


230 


www.frenchpdf.com 



Une largeur minimale est assignee aux deux champs texte. Le second est 
transforme en equivalent de <html :textarea> grace a une hauteur de 
huit lignes et a l’attribut multiligne. Les classes CSS ne sont pas utilisees 
pour ces deux champs, elles servent uniquement a les identifier comme 
explique plus haut. 

Suit une case a cocher permettant a l’utilisateur de specifier qu’il s’agit 
d’un nouveau sujet qu’il veut poster et enfin, une boite contenant les 
boutons OK et Annuler. On serait tente de leur assigner un attribut 
oncommand="this.posterReponseO" ou "this.annuierReponseO". Ce 
serait oublier que Ton est dans un widget XBL : il faut capturer l’evene- 
ment oncommand dans les <handlers>. 


Dans un widget XBL, il faut capturer les dies sur les boutons OK et Annuler 

<handler event="command"> 

switch (event. originalTarget.className) { 
case "boutonOk" : 

this.posterReponseO ; 
break ; 

case "boutonAnnul er" : 
this.cacherReponseO ; 
break ; 

} 

</hand1 er> 

Des modifications mineures sont apportees aux fonctions p1ier() et 
deplierO : un attribut <fie1d name="enReponse">fal se</fie1d> fait 
son apparition et indique a ces deux fonctions si elles doivent montrer 
l’element <xul:vbox> lors d’un depliage, ou au contraire le masquer et 
montrer l’element <p> qui contient le corps du message. La fonction 
cacherReponseO masque le formulaire (element <xu1 :vbox>) et retablit 
la visibility de la reponse (element <p>). 

Maintenant (et e’est la le coeur de la procedure d’enregistrement d’un 
message), la fonction posterReponseO entre en jeu : 

var c = document . getAnonymousNodes (thi s) [0] . chi IdNodes ; 
var cl; 

for (var i = 0; i < c. length; ++i) { Q 
if (c [i ] . nodeName == "xulivbox") { 
cl = c [i ]. chi IdNodes ; 
break ; 

} 

} 

var titre, texte, nouveauSujet ; 
for (var i = 0; i < cl. length; ++i) { Q 
dump(cl[i] . nodeName+"\n") ; 
if (cl[i] .nodeName[0] == "#") @ 
conti nue ; 
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if (cl[i] .className == "texteTitre") { 0 
titre = cl[i]. value; 
cl[i] .value = null ; 

} 

else if (cl[i] .className == "texteTexte") { 0 
texte = cl [i ] . value; 
cl [i ] .value = null ; 

} 

else if (cl[i] .className == "cocheSujet") { 0 
nouveauSujet = cl[i ]. checked ; 
cl [i ] .checked = false; 

} 

} 

if (titre == "" || texte == "") { 0 

ajouterErreur (gStri ngBundl e . getStri ng("texteVi de")) ; 
return ; 

} 

if (nouveauSujet) 0 

var r = posterMessageSoap(ti tre , texte, ""); 
el se 0 

var r = posterMessageSoap(ti tre , texte, 

this.getAttribute("sId")) ; © 

if ( ! r) 0 

ajouterErreur (gStri ngBundl e . getStri ng( "message Pas Envoye")) ; 
el se 

this .cacherReponse() ; 

Comme on opere sur du contenu anonyme, on parcourt les enfants du 
premier bloc di v Q ; lorsqu’on tombe sur l’element xul :vbox, conteneur 
pour notre formulaire, on quitte la boucle. On parcourt ensuite les diffe- 
rents elements de cette meme boite verticale xul :vbox 0 : si c’est un 
noeud #text ou #comment, on passe directement a l’iteration suivante, via 
l’instruction continue 0 , evitant ainsi un acces a une propriete 
className qui provoquerait des erreurs. On tente ensuite de recuperer 
successivement le titre 0, le texte 0 du message et la valeur de la case 
cochee 0 . 

Une fois ces operations « d’extraction » de valeurs terminees, on verifie 
que Ton n’envoie pas un message nul 0 : si c’est le cas, on signale l’erreur 
et on arrete la fonction. 

Si c’est un nouveau sujet qui est en fait poste 0, on passe un UR1 de 
sujet vide, pour que le serveur PHP cree un nouveau sujet. Si c’est une 
reponse a un sujet 0, on passe l’URI du message, contenu dans la pro- 
priete sld du widget XBL. On fait ensuite appel a la fonction SOAP 
dediee ©• 

Enfm, un dernier test sur la valeur retournee 0 permettra de s’assurer 
que l’enregistrement du message a bien eu lieu. 
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Changements dans les fichiers JavaScript 

Nous avons vu l’utilisation de la methode posterMessageSoapO. Les 
autres methodes de soap.js sont utilisees dans les deux fichiers 
identification. js et forum. js. 

Sur xul forum. xul, au moment de la verification de l’identite de l’utilisa- 
teur, nous ecrirons : 

if (lidentificationSOAPO) 
return ; 

identificationLDAPO ; 

Tous les appels SOAP etant synchrones, il n’y a pas de problemes de 
callback comme ceux rencontres avec les appels LDAP. On peut done 
attendre que l’identification SOAP se termine pour passer a la suite. La 
fonction identificationSOAPO est definie de la maniere suivante : 

var dn = "uid="+document.getEiementById("xf-ident- 
ident_nom") . val ue+" , "+gConfig . 1 dap . baseDn ; 
var pass = document. getE1ementById( 

"xf-ident-ident_pass") .value; 
initial iserSoap(document .getE1ementById( 

"xf-ident-ident_nom") .value) ; 
identi fierSoap(dn , pass); 

var r = verifierSessionSoapO ; 

gPhpSessName = r [0] ; 
gPhpSessId = r [ 1] ; 

if (r != false && r [2] ) { 
return true; 

} else { 

ajouterErreur("Erreur identification SOAP"); 
return false; 

} 

II faut d’abord initialiser SOAP, avec le nom d’utilisateur fourni et 
s’identifier selon les informations rentrees par l’utilisateur. La valeur de 
retour de verifierSessionSoapO permet d’obtenir les informations de 
session, stockees dans deux variables globales. Le dernier test permet de 
voir si l’identification a fonctionne ou pas. 

Les deux variables de session vont etres transmises par l’URL (sous 
reserve d’identification valide, bien sur) : 

var url = "chrome://xu1forum/content/index.xu1?config="+ 
gConfig . ur1+"&phpsessname="+gPhpSessName+"&phpsessid="+ 
gPhpSessId+"&auteur="+ 

document . get El ementByld ("xf-i dent- i den t_nom") . val ue ; 
document . location . href =encodeURI (url ) ; 
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Pour aller plus loin 

Analyseur dynamique d'URL 

Un bon exercice consisterait a ecrire une fonc- 
tion qui analyse I'URL du fichier et cree direc- 
tement un objet, sous la forme : 

{ nomdefavariabfe : savafeur, 
nomdefasecondevariabfe : savafeur 
}■ 

Ceci permettrait de s'affranchir d’une struc- 
ture d'URL fixe. Si vous voulez, vous pouvez 
meme rendre ces variables globales, grace a 
la fonction : 

eval("var "+nomdel avarf able+" = " 
+saval eur+" ; ) ; 


Pour etre recuperees a la page suivante, f ndex . xul : 

var 1 = decodeURI(document . 1 ocatf on . href) ; 
var vars = 1 .split ("&") ; 

var phpSessName = vars [1] . substr(vars [1] . i ndexOf (”=")+l) ; 
var phpSessId = vars[2] .substr(vars[2] . i ndexOf (”=")+l) ; 
var auteur = vars[3] . substr(vars [3] . i ndexOf (”=")+l) ; 

On prend comme acquis que I’URL est sous la forme chrome://xulforum/ 
content/index. xul?config=...&phpsessname=...&phpsessid=...&auteur=... 

On peut ensuite initialiser SOAP, avec le nom de la session et sa valeur : 

initiafiserSoap(auteur, phpSessName, phpSessId); 

Enfin, lors d’un double-clic sur l’arbre, on pourra ecrire, dans la fonction 

ouvri rPopupSujetO : 


Recuperation du contenu d’un message avant affichage par pop-up XBL 


var message = obteni rMessageSoap(titre) ; 
var mDate = message ["date"] . substr(8 , 2); 
var mMonth = message["date"] . substr(5 , 2); 
var mYear = message ["date"] . substr(2 , 2); 
var mHours = message["date"] . substr(ll, 2); 
var mMinutes = message ["date"] . substr(14 , 2); 
var div = divs[i] ; 
div.id = titre; 

div. setAttri bute("sld" , ti tre) ; 
div. setAttri bute(" auteur" , message ["auteur"] ) ; 
div. setAttri bute("date" , mDate+"/"+mMonth+"/"+mYear+" "+ 
mHours+" : "+mMi nutes) ; 

div.setAttribute("titre" , message["titre"]) ; 
var p = div.getEfementsByTagName("p") [0] ; 
p.innerHTML = message ["texte"] ; 


Les nombreux decoupages de la chaine ont pour but de transformer un 
champ MySQL yyyy-mm-dd hh:ii:ss en format plus lisible dd/mm/yy 
hh:ii. Vous remarquerez que Ton donne une valeur a l’attribut sld, qui 
sert lors de l’enregistrement d’une reponse. 

La propriete innerHTML du paragraphe permet d’injecter directement du 
HTML dans le contenu du paragraphe. 
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Attention Injections de code 

II faut etre extremement prudent, lorsqu'on autorise I'utilisateur a ren- 
trer des donnees. La fonction strip_tags() de PHP permet d'eviter les 
balises malveillantes comme <object>, <script>, <img>, mais el le ne 
controle pas et c'est indique sur la page de manuel consumable sur le 
site de php.net, les attributs onmouseover et autres, qui pourraient 
servir a creer dynamiquement du JavaScript ajoutant du contenu mal- 
veillant. 

Que faire done ? II faudrait creer notre propre fonction strip_tags. Un 
analyseur XML construirait une representation du message et pour 
chaque balise n'autoriserait que les attributs minimaux. De plus, ceci 
permettrait de signaliser un eventuel document XML mal forme, qui 
causerait une erreur lors de I'utilisation de innerHTML (si on lui donne la 
valeur « <a href="http://xulforum.org>site</a> », avec un guillemet fer- 
mant manquant, le message ne sera pas affiche). 

Une autre alternative, beaucoup plus realisable, serait I'utilisation d'une 
syntaxe wiki et de la classe Wi kf Renderer : en utilisant la syntaxe wiki et 
une classe qui cree dans tous les cas du XHTML conforme, on evite les 
erreurs XML et les injections de code malveillant. 

► http://fr.php.net/strip_tags 

► http://ljouanneau.com/blog/2004/05/16/281-wikirenderer-205 


En resume... 

C’etait la derniere touche a apporter au code de XUL Forum. II est 
maintenant fonctionnel : vous pouvez vous amuser a poster des sujets et 
a vous repondre a vous-meme. 

Nous avons done vu que pour implementer une nouvelle methode de 
communication, par-dessus une base de code deja existante, il faut agir 
sur trois ensembles : 

• l’ensemble du code serveur, avec le SOAPServer en PHP5 ; 

• l’ensemble des routines JavaScript client : c’est le fichier soap, js ; 

• l’ensemble du JavaScript charge de l’interface utilisateur : 
fdentfff cation. js, forum. js. 

Pour terminer l’aventure XUL Forum, il ne reste plus qu’a empaqueter 
notre application, pour la distribuer facilement... nous allons pour cela 
tirer parti de la technologie XPInstall. 


235 


www.frenchpdf.com 


12 - Les services web, pour une communication harmonieuse entre client et 



Les Cahiers du programmeur XUL 


T File Edit View Go Bookmarks Tools Window Help Debug £>A 


'©. ©f_ 

T (£|Home @) Bookmarks (^. XUL Forum : id.. 


chrome : //xulf orum/content/index . xul?conf ig=http : //localhost/^ jonathan/xulf orum/params . xml&phpsessname=PHP5E55ID&p (?) | 


© ao 


J. Gentoo Forum ... A parent's pri . . . The Jargon File @) Livre (^. AKBK home : Gentoo Linux . 


© fcr XUL Forum : fenetre principal 


T© http://localhost/^jo. ■ .orum/rdfmessages.php| 




Fichier Connexion Configuration 

Nouveau Editer Supprimer Plier Deplier Retoumer 


Les membres du forum 
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A Jonathan Protzenko 
^ Stephane Mariel 


Rien a signaler 

O Qr @ (5 1 


La liste dessujets du forum 


Titre 

| Dernier message le 

| Auteur 

L'V 

▼ Test pour la synchro lus / non lus 

2005-07-14 22:48:09 

jonathan 

▲ 

bid, le titre de la reponse 

2005-07-1516:58:31 

jonathan 


Une nouvelle reponse, comme s'il n'y en avait pas deja assez ! 

2005-07-15 00:32:46 

jonathan 


▼ je me devais de repondre a ce topic 

2005-07-1419:20:19 

jonathan 


ouais 

2005-07-1419:20:54 

jonathan 


▼ je me devais de repondre a ce topic 

2005-07-1419:20:11 

jonathan 


; je me devais de repondre a ce topic 

2005-07-1419:21:44 

jonathan 


je me devais de repondre a ce topic 

2005-07-1419:20:32 

jonathan 


Nouveau sujet (un autre encore) pour les br 

2005-07-1419:19:23 

jonathan 


▼ Nouveau sujet (un autre encore) 

2005-07-1419:18:44 

jonathan 


je me devais de repondre a ce topic 

2005-07-1419:20:37 

jonathan 


Nouveau sujet 

2005-07-1419:16:38 

jonathan 


▼ Titre d'un nouveau sujet, la la la 

2005-07-14 01:17:34 

Jonathan 


Non je veux un autre titre 

2005-07-1419:05:09 

jonathan 


j-Qa rox ! 

2005-07-1419:04:29 

jonathan 


! (Ja rox ! 

2005-07-1419:03:47 

jonathan 


| Et une autre reponse ! 

2005-07-1419:01:16 

athan 


Je reponds ! 

2005-07-1419:00:57 

athan 


▼ XUL est-il un langage parfait ? 

2005-06-27 22:51:02 

Jonathan 


i - je me devais de repondre a ce topic 

2005-07-1419:21:27 

jonathan 


1 La reponse est evident 

2005-07-1419:11:26 

jonathan 


! Une premiere reponse, qui tue 

2005-05-05 23:14:36 

Jonathan, le warrior H 

Une autre 

2005-05-05 23:14:36 

Patrick 

▼ L'interaction entre XUL et PHP 

2005-05-04 20:56:49 

Stephane 

j -je me devais de repondre a ce topic 

2005-07-1419:21:38 

jonathan 
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Figure 12-3 Beaucoup de sujets... pour tester le defilement ! 
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Pour aller plus loin Se faciliter le travail avec WSDL 

Nous avons volontairement choisi de debuter les ser- 
vices web via I'utilisation de I'API SOAP. II existe 
cependant une autre technique : WSDL, Web Services 
Description Language, un autre langage XML. 

WSDL sert a decrire la maniere dont fonctionne un 
service web, comment y acceder, quels sont les para- 
metres a fournir, a retourner, I'URI du serveur, etc. 
Nous pourrons done ainsi creer un fichier WSDL qui 
decrit notre xfServeur et qui servira pour les deux 
parties : pour PHP, nous le passerons en premier para- 
metre du constructeur SOAPServer. Pour Mozilla et 
e'est la le plus important, toutes les classes SOAP vont 
s'effacer au profit d'un seul objet... 

Quand utiliser WSDL ? 

La reponse est simple : il faut utiliser WSDL partout 
ou e'est possible. Les traitements, surtout avec 
Mozilla, s'en trouvent enormement simplifies. Si le 
client etait en PHP, la simplification serait elle aussi 
enorme, avec par exemple : 

Sretour = $c"lient->infosSession() ; 

Les fonctions du serveur seraient enregistrees comme 
fonctions de I'objet client en PHP ! 

Cependant, le fichier WSDL n'est pas toujours present 
pour un service web et en utilisant uniquement cette 
technologie, nous masquerions la logique SOAP qui 
se cache derriere : WSDL n'est finalement qu'une 
maniere « d'envelopper » SOAP... qu'il ne faut pas 
pour autant perdre de vue ! 

Un fichier WSDL se structure generalement en quatre 
parties, que vous retrouverez sur le code de la page 
suivante. 

1. La description des messages (ici nous n'avons inclus 
que la methode i nfosSessionO) : pour chaque 
message on decrit la requete et la reponse, avec a 
chaque fois les differents parametres. Pour chacun 
des parametres, on indique le nom et le type defini 
selon XML Schema : les types les plus courants sont 
« integer », « decimal », « boolean » ou « string ». 
II est possible de creer ses propres types, comme 
des objets, avec des proprietes de differents types, 
mais ceci depasse le cadre de XUL Forum ! 

2. Une section <portType> : pour chaque operation, 
on lui associe une requete (le prefixe tns:, comme 


targetNamespace, indique que e'est un element de 
I'espace de nommage principal) et une reponse. II 
est possible d'omettre la reponse si la methode ne 
retourne rien, ou meme la requete si elle ne 
demande aucun parametre. 

3. Une section <binding> : on reprend les operations 
decrites precedemment et on les associe a SOAP. 
<soap: bi ndi ng> decrit le type d'appel et 
<soap:body> decrit la maniere dont doit etre 
formee la requete SOAP : document style ou rpc style. 

4. Enfin, la section <service> decrit I'adresse du ser- 
veur SOAP et lui associe les <bi ndi ng> precedents. 


Culture Les differentes facons 
de presenter un message SOAP 

Pour des raisons historiques, il y a plusieurs « modeles » pour 
structurer un message SOAP. L'article des DeveloperWorks d'lBM 
vous permettra d’approfondir le sujet. Car il faut bien realiser que 
par I'utilisation de SOAP, on aborde tout un monde de services 
web, qui ouvre la porte a de nombreuses specifications a com- 
prendre et a maitriser : les schemas XML, les differents types de 
requetes SOAP, les types XSD... 

► http://www-128.ibm.com/developerworks/webservices/ 
library/ws-whichwsdl/ 


Modifications cote PHP 

Avec PHP, nous pourrions ecrire directement : 

$s = new SOAPServer(" ./xfServeur. wsdf") ; 

II n'est plus necessaire de preciser I'URI de ce serveur : 
il est directement rentre dans le fichier WSDL. 

De plus, un client PHP s'utiliserait de cette maniere : 

$c = new SOAPClient("http:// 

www. xul forum.org/xfServeur .wsdl ") ; 

$c->i nfosSessi on() ; 

$c->i denti fi cation("ui d=. . . " , "***") ; 

Le gain de simplicity est flagrant ! 
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Ce fichier explique a JavaScript et PHP comment fonctionne notre serveur SOAP, ce qui est a I'origine de la sim- 
plification de notre code. 

<?xml version="1.0" ?> 

<def i ni ti ons name="xfDefi ni ti ons" 

xml ns="http : //schemas . xml soap . org/wsdl /" 
targetNamespace="http : //www. xul forum . org/xfSe rveu r" 
xml ns : tns="http : //www . xul forum .org/xfSe rveu r" 
xml ns : soap="http : //schemas . xml soap .org/wsdl /soap/" 
xml ns : xs="http : //www. w3 . org/2001/XMLSchema" 
xml ns : monXs="http : //www . xul forum . org/monXs" 

> 

<message name="infosSessionRequete" /> 

<message name="i nfosSessionReponse"> 

<part name="phpsessid" type="xs:string" /> 

<part name="phpsessname" type="xs:string" /> 

<part name="identOk" type="xs: boolean" /> 

</message> 

<portType name="xfServeurPortType"> 

<operation name="i nfosSession"> 

<input message="tns:infosSessionRequete" /> 

<output message="tns:infosSessionReponse" /> 

</ope rations 
</portType> 

<bindi ng type="tns:xfServeurPortType" name="xfServeurBi ndi ng"> 

<soap:binding style="rpc" transport="http://schemas. xmlsoap.org/soap/http" /> 

<operation name="i nfosSession"> 

<soap:operation soapAction="infosSession" /> 

<input> 

<soap : body encodi ngStyl e="http : //schemas . xml soap . org/soap/encodi ng/" 
namespace="urn: xf Serveur: i nfosSession" 
use="encoded" /> 

</i nput> 

<output> 

<soap : body encodi ngStyl e="http : //schemas . xml soap . org/soap/encodi ng/" 
namespace="urn: xf Serveur: i nfosSession" 
use="encoded" /> 

</output> 

</ope rati ons 
</bindings 

<servi ce name="xfServeurService"s 

<port name="xfServeurPort" binding="tns:xfServeurBinding"s 

<soap: address locati on="http://localhost/~jonathan/xul forum/soap. php" /> 

</ports 

</services 

</definitionss 
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Un gain de simplicity incomparable avec Mozilla 

Du cote de JavaScript, un fichierwsdl . js ressemblerait, a peu de 
choses pres, a ceci : 

var gProxy = nul 1 ; 

function initialiserWsdl(){ 
var listener = { 

onLoad: function (pProxy) { 
gProxy = pProxy; 

}, 

onError: function (pError){ 
dump("Erreur : " + pError); 

}, 

infosSession : function (phpsessname , 
phpsessid, identOk) { 

//trai tement . . . 

} 

}; 

try { 

netscape . secu ri ty . Pri vi 1 egeManager . 

enablePrivilege("UniversalBrowserRead") ; 
var factory = new WebServi ceProxyFactoryO ; 
factory .createProxyAsync ("http: //local host/ 
~jonathan/xulforum/xfServeur.wsdl " , 
"xfServeurPort" , null, true, listener); 

} catch (e) { 

dumpC'Impossible de creer le proxy Wsdl") 

} 

} 

function test() { 
initialiserWsdl () ; 
if (IgProxy) { 

dumpC'L' initialisation n'est pas terminee, 
veuillez essayer ulterieurement") ; 
return; 

} 

dump(gProxy.infosSessionO) ; 

} 

test() ; 

On pourrait alors transformer toute la partie SOAP en partie WSDL. 
II faudrait decouper chaque fonction synchrone en deux : d'une 
part, toutes les actions a effectuer avant I'appel de la methode dis- 
tante, bien evidemment, d'autre part, les actions consequentes au 
retour WSDL. 

On voit bien ici que les operations ne sont pas du tout synchrones : 
la methode du listener i nfosSessi on n'est appelee que lorsque 
les retours de la methode distante arrivent, ce qui peut etre plu- 
sieurs secondes apres I'appel original. Un traitement asynchrone 
permet une meilleure experience utilisateur... mais plus de com- 
plexity dans les scripts. 


Un premier probleme qui se pose serait de savoir, une fois que Ton 
a clique sur « OK » a I'identification, comment determiner si LDAP 
et SOAP ont tous deux reussi leur identification. II faudrait alors 
repenser differemment les fonctions. Deux variables globales, 
gLdapOk et gSoapOk seraient mises toutes les deux a false 
juste apres la pression sur « OK ». Ensuite, on lance les deux iden- 
tifications. LDAP, une fois son identification reussie, met gLdapOk 
a true et appelle passe r PageSui van te(). SOAP precede de 
meme mais c'est gSoapOk qui est mis a true. Ensuite, 
passerPageSui vante commencera par : 

if (! (gLdapOk && gSoapOk)) 

return; 

I 

Les autres fonctions ne devraient quant a elles pas poser de pro- 
blemes majeurs. 

Les limitations de Mozilla : bug 271560 

II n'est cependant pas possible de tout recrire en « version WSDL ». 
D'abord, parce que ce serait fort long et ne ferait qu'alourdir un 
chapitre deja consequent et surtout, parce que Mozilla souffre d'un 
bogue qui fait planter le navigateur a chaque tentative d'initialisa- 
tion d'un WebServi ceProxyFactory. 

Au moment de finaliser ce chapitre, le bogue n'est toujours pas 
resolu. Un correctif est disponible sur la page du bogue sur le site 
BugZilla et semble resoudre le probleme, mais il n'a pas ete 
applique sur les sources. Concretement, tant que ce patch ne sera 
pas integre dans le CVS, le bogue perdurera dans Firefox, Thunder- 
bird, Mozilla... II a cependant ete marque comme bloquant la sortie 
de la version 1 .8 beta 4, qui est planifiee pour le courant de I'ete. 
Pour finir la partie « programmation » du livre, ce sont un peu les 
limites de Mozilla que nous atteignons... 

Alors, que penser ? Faiblesse, ou force de Mozilla ? De toute evi- 
dence, plutot une force... car ce sont des utilisateurs « normaux », 
qui ecrivent du JavaScript, qui sont capables de rapporter ces 
bogues. Et la communaute se penche sur le bogue (voir d'ailleurs 
la discussion qui a suivi ce rapport) et propose des solutions. Alors 
bien sur, la reactivite n'est pas toujours ideale. Mais il y a d'autres 
preoccupations, plus critiques, pour assurer le bon deroulement de 
la route vers Firefox 1 .5... 

Vous aussi, si vous pensez avoir heurte un bogue de Mozilla lors de 
votre developpement, vous pouvez en faire part aux developpeurs 
par I'intermediaire de BugZilla. Ilya cependant quelques regies de 
politesse a respecter : verifiez tres soigneusement que votre bogue 
n'a pas deja ete reporte, evitez de mettre une priorite maximale 
parce qu'il est sans doute embetant mais peut-etre seulement pour 
vous et surtout, testez le bogue sur la derniere version, datee du 
jour meme, une « nightly build ». 

► http://bugzilla. mozilla. org/show_bug.cgi?id=271 560 
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Distribution de XUL Forum 
avec XPInstall 


Ceci sera le dernier chapitre : maintenant que tout est 
fonctionnel, que nous avons franchi les etapes les plus 
difficiles, que XPCOM a ete maitrise... il est temps de revenir 
au chapitre 4, pour ecrire, dans la lignee des contents, rdf, un 
fichier i nstal 1 . rdf ! Alors, nous pourrons utiliser XPInstall, 

« Cross Platform Install », pour installer XUL Forum sur 
n’importe quelle machine equipee d’un navigateur compatible. 


SOMMAIRE 

► Le fichier .xpi : composition 

► Signaler des mises a jour 
a I'utilisateur 

MOTS-CLES 

► install. rdf 

► fichiers .jar 
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Bien sur, l’installation ne se limite pas a un simple fichier mais dans ce cha- 
pitre, il n’y aura quasiment plus de programmation, simplement de la mise 
en forme : creation de fichiers .zip, ecriture de fichiers .rdf et... des tests ! 


OuilLS Zipper 


Sous Windows, vous pourrez utiliser 7-zip et sous 
Unix, la commande : 

zip -r monfichier.zip dossierl 
dossier2 
vous sera fort utile. 

> http://www.7-zip.org/ 


Le fichier xulforum.xpi 


Creation du fichier xulforum.jar 


Nous allons placer tous les fichiers de XUL Forum dans une archive, au 
format ZIP, mais portant l’extension .jar. En effet, la structure d’un 
fichier XPI qui, rappelons-le, est le format des extensions Mozilla, est la 
suivante : 


XU 


Iforum.xp i (archive au format zip) 


install. rdf (firefox 0. 9-1.0) 
install.js (firefox < 0.9) 
chrome. manifest (firefox^l.l) 


chrome 


— xulforum.ja r (archive zip) 


xulforum.ja r (archive au format zip) 


chrome (fichiers xul, js, xbl) 
skin (fichiers css, images) 
locale (fichiers dtd, properties) 


Figure 13-1 La structure de notre xpi (il y a des dossiers supplementaires 
possibles, pour des composants, ou des fichiers .dll par exemple) 


Une fois les dossiers content, locale et skin presents dans l’archive 
xul forum . jar (au besoin, creez un fichier .zip et renommez-le en .jar), 
il faut ecrire le fichier install .rdf. Nous verrons egalement le fichier 
install.js, utilise pour la suite Mozilla et les anciennes versions de 
Firefox. Pour le fichier chrome .mani fest, il faut vous reporter a l’annexe 
expliquant comment travailler avec Firefox 1.5. Ce fichier est cependant 
entierement facultatif, et meme si vous utilisez Firefox 1.5, toutes les 
instructions donnees dans ce chapitre restent valides. L’annexe n’est la 
que pour expliquer plus en detail les nouveautes de Firefox 1.5 ! 
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Figure 13-2 

xulforum.jar reprend bien sur 
les trois dossiers principaux 


install. rdf : comment installer XUL Forum ? 

Une extension est identifiee par un GUID, Globally Unique Identifier. > http://en.wikipedia.org/wiki/GUID 
On peut l’obtenir avec le programme Windows guidgen, ou sous Unix 
avec la commande uuidgen. 

► http://www. microsoft.com/downloads/details. aspx?Familyld= 

94551 F58-484F-4A8C-BB39-ADB270833AFC &displaylang=en 

Si vous etes en train de creer votre propre extension, evitez de prendre le 
meme GUID que celui donne, il sert deja pour l’extension recuperable 
en ligne de XUL Forum ! 

jonathan@dai sy ~ $ uuidgen 
540e3545-c647-4fe0-b536-a0d728d6f641 

Ceci nous permet d’ecrire le fichier i nstal 1 . rdf (voir page suivante). 

II n’y a ici qu’un seul element RDF : Descri pti on et il s’applique au fichier 
d’installation Q. On doit specifier obligatoirement : 

• le GUID de l’extension Q : nous en avons obtenu un plus haut ; 

• son nom 0 ; 
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► http://xulfr.org/wiki/ExtensionsFirefox/ 
PackageXPI 


Fichier install. rdf 

<?xml versf on="1.0" ?> 

<RDF xml ns="http ://www.w3 . org/1999/02/22-rdf-syntax-ns#" 
xml ns : em="http ://www. mozi 11a. org/2004/em-rdf#"> 

description about="urn:mozilla:install-manifest"> 0 

<em: i d>{540e3545-c647-4fe0-b536-a0d728d6f641}</em : id> Q 
<em:name>XUL Forum</em : name> 0 
<em:version>1.0.0</em:version> 0 

<em:targetApplication> 0 
<Descri pti on> 

<em : i d>{ec8030f7-c20a-464f-9b0e-lBaBa9e97384}</em: i d> 
<em : mi nVersi on>l. 0</em : mi nVersi on> 

<em :maxVersion>l. 5</em: maxVersi on> 

</Descri ption> 

</em : targetAppl i cati on> 

<em:targetApplication> 0 
<Descri pti on> 

<em : i d>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em: i d> 
<em : mi nVersi on>l. 0</em : mi nVersi on> 

<em : maxVersi on>l. 5</em: maxVersi on> 

</Descri ption> 

</em : targetAppl i cati on> 

<em:description>Un forum tout en XUL !</em:description> 0 
<em : homepageURL>http ://www. xul forum. org</em : homepagellRL> 0 
<em: updateURL>http://www. xul forum. org/update. rdf 
</em: updatellRL> 0 

<em: i conURL>chrome ://xul forum/ski n/boutonem. j pg 
</em : i conURL> © 

<em:file> © 

<Description about="urn:mozilla:extension:file:xulforum. jar"> 
<em : package>content/</em : package> 

<em : 1 ocal e>l ocal e/f r- FR/</ em : 1 ocal e> 

<em : ski n>ski n/</em : ski n> 

</Descri ption> 

</em:file> 

</Descri pti on> 

</RDF> 

• sa version 0, de preference sous la forme x.y.z pour permettre une 
compatibilite descendante avec des versions anterieures de Firefox 
(voir a ce propos la page du wiki de XulFR) ; 

• les applications 0 0 auxquelles l’extension est destinee : 

- d’abord, Firefox (identifie grace a son GUID) : on veut une version 
comprise entre 1.0 et 1.5 (les deux sont incluses). Bien sur, lorsque 
nous aurons a gerer la compatibilite entre les deux pour le widget 
XBL, il faudra faire deux paquets, dont un compatible 1.0 avec 
<maxVersi on>l . 0</maxVersion> et<mi nVersi on>l. 0</mi nVersi on> 
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- ensuite, Thunderbird : l’application est toujours compatible pour 
les deux, grace a l’astuce des overlays ; on peut done indiquer de 
meme le GUID de Thunderbird et les versions minimale et maxi- 
male. 

• ensuite viennent des elements Q qui ne sont pas indispensables, 
comme une description qui s’affichera dans le gestionnaire d’exten- 
sions, avec a ses cotes : 

- une URL @ pour la page du projet ; 

- une URL 0 vers un fichier RDF special capable d’indiquer si une 
nouvelle version est disponible ; 

- enfin, une URL © vers une icone, toujours a destination du ges- 
tionnaire d’extensions ; 

• le dernier element © est un fichier et il decrit (RDF: Description) le 
contenu du fichier .jar que nous avons cree precedemment : 

- <package> pour le contenu : le chemin est indique depuis la racine 
du paquet jar ; 

- <ski n> pour le theme ; 

- <1 ocal e> pour les fichiers de langue : on aurait aussi pu rajouter les 
fichiers de langue anglaise. 

II y a un bon nombre d’autres parametres possibles : des contributeurs — : — ; — ; — 

, . 1 „ , ► http://www.mozilla.org/proects/TireTox/ 

eventuels, un auteur... il y a d ailleurs une page dediee a ce propos sur le extensions/packaging/extensions.html 

site mozilla.org. 

En ce qui concerne les GUID, les principaux a retenir sont ceux de 
Firefox et de Thunderbird : ils sont indiques dans le fichier i nstal 1 . rdf. 

Si par exemple vous voulez creer une extension pour un autre produit, 
comme lediteur de pages web NVU, il vous faudra recuperer son GUID 
(en l’occurence, {136c295a-4a5a-41cf-bf24-5cee526720d5}). 

L’utilisation d’un fichier RDF est liee a l’existence du gestionnaire 
d’extensions dans Firefox/Thunderbird. Ceci explique d’ailleurs le rac- 
courci em (comme extensions manager) utilise pour l’espace de nommage 
XML. 

A ce stade, vous pouvez tester l’installation (Firefox et Thunderbird 1.x). 

La procedure est assez simple : 

• verifiez bien que xul forum, jar, lorsqu’il est dezippe, cree trois dos- 
siers content, locale et skin dans le dossier courant ; 

• creez un dossier, dist par exemple et creez ou placez au bon endroit 
le dossier dist/chrome, les fichiers di st/chrome/xul forum . jar et 
di st/i nstal 1 . rdf ; 

• toujours dans le dossier dist, zippez tout ce qui s’y trouve vers 
xul forum. xpi ; 
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Figure 13-3 

Vous devriez avoir ces 
fichiers a la racine du xpi ! 


Si vous utilisez Firefox : 

• placez xul forum . xpi dans votre serveur web ; 

• verifiez sa configuration, editez au besoin le fichier .htaccess et 
ajoutez 

AddType appl i cati on/x-xpi nstal 1 .xpi 

• pointez Firefox vers le fichier XPI : par exemple, http://localhost/ 
-jonathan/xulforum.xpi, attendez les trois secondes necessaires, installez, 
redemarrez Firefox et vous pourrez ajouter le bouton dans la barre 
d’outils et acceder a XUL Forum. 

Si vous utilisez Thunderbird, selectionnez Outils, Extensions, Installer et 
indiquez le fichier XPI fraichement cree. De meme qu’avec Firefox, vous 
devrez redemarrer et ajouter le bouton approprie dans la barre d’outils 
pour pouvoir utiliser XUL Forum. 



Attention Navigateur de developpement et de test 

II faut absolument separer votre cadre de developpement de votre cadre de test. Si, par 
exemple, vous lancez la procedure d'installation sur le meme navigateur que celui qui 
vous sert a developper, si votre fichier i nstal 1 . rdf contient une erreur, vous aurez 
tout de meme chrome://xulforum/content/, ce qui ne fera qu'ajouter a la confusion. 

Le plus simple est en fait de prendre un autre navigateur et un autre profil. Par exemple, 
si vous developpez avec Firefox, testez le XPI avec Thunderbird. Ou inversement. Vous 
avez aussi la solution d'utiliser deux versions separees de Firefox : une stable pour vos 
tests et une instable, pour votre developpement. Dans les deux cas, vous devrez creer un 
profil separe, pour ne pas meler les deux versions (les profils des versions 1 .5 sont decon- 
seilles a I'utilisation avec les versions 1 .0). Vous aurez ainsi : 

• une version stable, pour I'utilisation quotidienne et les tests d'installation. Firefox 1 .0 
par exemple. Profil : default ; 

• une version de developpement, disposant des dernieres nouveautes et avec chrome:/ 
/xulforum/content disponible d'office. Profil: test. Exemple: 1 .5 beta. 

Pour lancer le gestionnaire de profils, il faut utiliser I'option en ligne de commande 
-Proff 1 eManager (ou dans les menus de la suite Mozilla). 
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Compatibilite avec Mozilla 1 .x : install.js 

Pour les applications de version inferieure ou egale a Firefox 0.8 et 
Mozilla 1.x, qui n’utilisent pas le gestionnaire d’extensions, la procedure 
d’installation se fait grace a un simple fichier JavaScript : install .js, a 
placer dans le meme dossier que install . rdf. 


Installation avec un vieux Firefox ou SeaMonkey (suite Mozilla) 

initlnstall ("XUL Forum", "/jonathan/xul forum" , "1.0"); 0 
var f = getFol der("Profi 1 e" , "chrome"); 0 
setPackageFolder(f) ; 
addFile("chrome/xulforum. jar") ; 0 

regi sterChrome(PACKAGE | PR0FILE_CHR0ME , getFolder(f, 
"xulforum. jar") , "content/"); 0 
regi sterChrome(LOCALE | PR0FILE_CHR0ME, getFolderff, 
"xulforum. jar") , "locale/fr-FR/") ; 
regi sterChrome(SKIN | PR0FILE_CHR0ME , getFolder(f, 
"xulforum. jar") , "skin/"); 

if (getLastError() == SUCCESS) 0 
performlnstal 1 () ; 
el se 

cancel Instal 1 ("Une erreur est survenue."); 


On initialise d’abord l’installation 0 , avec dans l’ordre : 

• le nom de l’extension ; 

• une chaine sous la forme /auteur/identifiant. 

On demande ensuite a obtenir le dossier chrome du profil de l’utilisateur 
0 : c’est la fonction get Folder qui retourne le chemin vers ce meme 
dossier. On aurait pu remplacer « Profil » par « Program », mais on n’est 
pas toujours sur d’avoir les droits d’acces sur le repertoire chrome du pro- 
gramme (s’il est dans /usr/lib par exemple) et a chaque mise a jour de 
Mozilla, il aurait fallu reinstaller l’extension. II est done plus sage d’ins- 
taller l’extension dans le dossier du profil de l’utilisateur. 

On indique que ceci sera le dossier du paquet et on y copie le fichier 
xulforum. jar. 0 

Les trois lignes suivantes 0 servent a installer les dossiers content, 
locale et skin. Le premier parametre indique le type (PACKAGE, LOCALE, 
SKIN) et specific de plus, grace a un OU logique, que Ton opere dans le 
dossier « Profil » (ce qui est d’ailleurs le comportement par defaut de 
Firefox 1.x). Le second parametre permet d’obtenir le chemin vers le 
fichier JAR et le dernier indique le dossier du fichier JAR qui est con- 
cerne. Enfin, si tout est bon 0 , on peut proceder a l’installation; sinon, 
on l’annule en renvoyant un message d’erreur. 


Alternative Se passer des fichiers .jar 

II est possible de ne pas employer de fichier JAR : 
on utiliserait alors addFolder au lieu de 
addFile dans install.js. Pour le fichier 
i nstal 1 .rdf, il faudrait faire reference au dos- 
sier xulforum et non pas au fichier 
xulforum. jar. On utiliserait ensuite 
urn : mozi 11a: extensi on : xul forum. 
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Si vous utilisez la suite Mozilla pour developper, vous pouvez mainte- 
nant tester directement l’extension. Procedez a la creation du fichier .xpi 
comme explique precedemment, avec les fichiers install.js et 
install . rdf a l’interieur, pour plus de compatibilite : c’est termine ! Le 
plus simple est ensuite d’offrir un lien vers le fichier .xpi et la suite 
Mozilla vous proposera automatiquement de l’installer. 

En combinant les deux types d’installation et l’astuce des overlays, avec 
un meme fichier .jar, issu des sources decrites tout au long du livre, on a 
un fichier XPI qui fonctionne avec SeaMonkey 1.0, Firefox 1.5 et 
Thunderbird 1.5 ! 


Alternative Installation via JavaScript 

XULPIanet propose une autre methode d'installation, declenchee par un 
script. El le fonctionne toujours et permet de plus d'avoir sa propre fonc- 
tion de retour, appelee apres I'installation. En voici un exemple, fonc- 
tionnel, a placer dans le meme dossier que xul forum .xpi . 

<?xml version="1.0" ?> 

<html> 

<head> 

<title>Installation de XUL Forum</title> 

<scri pt type="appl ication/x-javascri pt"> 
function retour(nom, resultat) { 

alert("Le paquet "+nom+" a ete installe ; code retour : "+ 
resultat+"(0 indique le succes)"; 

} 

function installer() { 
var xpi = new Object; 
xpi.xulforum = "xulforum.xpi"; 

Install Trigger, i nstall (xpi , retour) ; 

} 

</scri pt> 

</head> 

<body> 

<strong>Pour Mozilla l.x</strong> 

<a href="#" onclick="javascri pt : installer() ; return false;"> 
Installer 
</a> 

</body> 

</html> 


248 


www.frenchpdf.com 



H3 

tn 


Signaler des mises a jour futures 

Ce sera la touche finale ; nous avions precise un <em:updateURL /> dans 
le fichier i nstal 1 . rdf : en plafant un fichier .rdf correct a l’adresse indi- 
quee, nous serons en mesure d’indiquer au gestionnaire d’extensions de 
Firefox ou de Thunderbird qu’une nouvelle version est arrivee. Cette 
methode n’est cependant pas a utiliser avec les extensions hebergees sur 
le site update.mozilla.org, car le site possede son propre fichier de mises a 
jour, utilise par defaut par Firefox s’il n’y a pas d’updatellRL specific. Tout 
se fait via le contenu du fichier update . rdf. 


Le fichier signalant les mises a jour 

<?xml version="1.0" ?> 

<RDF xml ns="http : //www.w3 .org/1999/02/22-rdf-syntax-ns#" 
xml ns :em="http : //www.mozi 1 1 a .org/2004/em-rdf#"> 

<Descri pti on about="urn :mozi 1 1 a: extension : {540e3545-c647-4fe0-b536-a0d728d6f641}"> 

<em : updates> 

<Seq> 

<1 i resource="urn :mozi 1 1 a: extension : {540e3545-c647-4fe0-b536-a0d728d6f641} : 1. 0. 0" /> 
<1 i resource="urn :mozi 1 1 a: extension : {540e3545-c647-4fe0-b536-a0d728d6f641} : 1. 0. 1" /> 
</Seq> 

</em: updates> 

</Description> 

<Descri pti on about="urn :mozi 1 1 a: extension : {540e3 545-c647-4fe0-b536-a0d728d6f641} : 1. 0. 0"> 
<em:version>1.0.0</em:version> 

<em : targetAppl i cati on> 

<Description> 

<em: id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em : i d> 

<em : mi nVe rsi on>l . 0</ em : mi nVersi on> 

<em : maxVe rsi on>l . 5</ em : maxVersi on> 

<em:updateLink>http://localhost/~jonathan/xulfo rum. xpi</em: update Li nk> 

</Descri pti on> 

</em : targetAppl i cati on> 

<em : targetAppl i cati on> 

<Description> 

<em: id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em : i d> 

<em : mi nVe rsi on>l . 0</ em : mi nVersi on> 

<em : maxVe rsi on>l . 5</ em : maxVersi on> 

<em:updateLink>http://localhost/~jonathan/xulfo rum. xpi</em: update Li nk> 

</Descri pti on> 

</em : targetAppl i cati on> 

</Description> 

<Descri pti on about="urn :mozi 1 1 a: extension : {540e3 545-c647-4fe0-b536-a0d728d6f641} : 1. 0. 1"> 
<em:version>1.0.1</em:version> 

<em : targetAppl i cati on> 

<Description> 

<em: id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em : i d> 

<em : mi nVe rsi on>l . 0</ em : mi nVersi on> 
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<em : maxVe rsi on>l . 5</ em : maxVersi on> 

<em : updateLi nk>http: //local host/~jonathan/xul fo rum- 1.0.1.xpi</em: update Li nk> 

</Descri pti on> 

</em : targetAppl i cati on> 

<em : targetAppl i cati on> 

<Description> 

<em: id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em : i d> 

<em : mi nVe rsi on>l . 0</ em : mi nVersi on> 

<em : maxVe rsi on>l . 5</ em : maxVersi on> 

<em : updateLi nk>http: //local host/~jonathan/xul fo rum- 1.0.1.xpi</em: update Li nk> 

</Descri pti on> 

</em : targetAppl i cati on> 

</Description> 

</RDF> 

On ouvre d’abord avec une description de l’extension : c’est 
urn :mozi 1 1 a :extension : {CUID}. C’est en fait une sequence des diffe- 
rentes versions disponibles. 

Pour chaque version disponible, on indique son numero et pour chaque 
application a laquelle elle se destine, on indique son GUID (ici ceux de 
Firefox puis Thunderbird) et le fichier XPI correspondant. 

Pour assurer la compatibility: avec de tres vieilles versions de Firefox, on 
aurait pu ajouter au sein du premier Descri pti on : 

<em:version>1.0.1</em:version> 

<em : updateLi nk> 

http : //I ocal host/~jonathan/xul forum/xul forum-1 . 0.1. xpi 
</em: updateLi nk> 

Firefox et Thunderbird sont maintenant en mesure de se mettre a jour 
seuls des qu’une nouvelle version est disponible (apres confirmation de 
l’utilisateur bien sur). 


Figure 13-4 

XUL Forum est dans le 
gestionnaire d'extensions ! 
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En resume... 

II n’est pas toujours facile de maintenir une extension pour une large 
etendue de versions et de logiciels differents. Cependant, les nouvelles 
versions 1.5, meme si elles introduisent une nouvelle organisation du 
dossier chrome (pour se passer des longs et douloureux fichiers 
contents, rdf), restent compatibles avec le systeme d’installation decrit 
ici. En appliquant les techniques de compatibilites evoquees, il est pos- 
sible d’avoir une extension qui, au moins, s’installera sur toutes les ver- 
sions de Firefox, de Thunderbird ou de Mozilla... et meme du tout 
dernier SeaMonkey ! 



Figure 13-5 XUL Forum, sur I'une des toutes dernieres versions de SeaMonkey (remarquez le logo en haut a droite qui a change !) 
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Le mot de la fin 


Que retenir fmalement de ce long developpement ? Peut-etre une nou- 
velle conception de ce que Ton appelle les clients riches, qui, de toute 
evidence, sont des applications a mi-chemin entre le client lourd et le 
client leger et qui combinent les avantages des deux technologies. 

• Le futur proche verra l’avenement des standards ouverts, passage 
incontournable, garants des evolutions futures : XUL et plus large- 
ment tout le XPFE sont l’incarnation de ces standards. CSS, 
ECMAScript, mais, surtout, XML, sont les fondations necessaires 
pour assurer la solidite des prochaines applications riches. 

• Le renouveau des navigateurs, rendu sensible avec l’alternative 
Firefox qui gagne du terrain, est aussi le signe qui montre qu’une 
nouvelle page de l’histoire de l’lnternet est en train de s’ecrire. Le 
monopole d’Internet Explorer vacille et peut-etre XUL symbolise-t- 
il cette « nouvelle voie » : des applications plus riches, qui ouvrent la 
porte a une meilleure experience utilisateur. Qu’est-ce que Firefox, 
finalement, sinon le fruit du XPFE ? 

• Le XPFE a une puissance insoup^onnee au premier abord. On croit 
souvent (et Ton est dans le vrai si Ton se cantonne a l’antique 
HTML), que JavaScript et CSS ne sont que des technologies 
« amusantes », seulement bonnes a quelques animations appelees 
DHTML. Mais en plongeant dans le XPFE, en depassant le stade 
de l’application test « Hello World », on peut alors realiser toute la 
puissance de Mozilla. 
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Au cours de la conception de XUL Forum, nous avons, tout de 
meme, reussi a implementer les bases d’un environnement graphique 
(presque un « window manager »), a creer des elements au comporte- 
ment autonome, nous nous sommes connectes a divers types de sys- 
temes (PHP, LDAP) et ce par les moyens les plus varies (XML, 
SOAP, API LDAP, sources RDF), notre application s’installe main- 
tenant d’un simple clic de souris sans avoir a se soucier de probleme 
de plate-forme... et tant de choses encore n’ont pas ete abordees ! 

• L’apprentissage pour realiser tout cela a pourtant ete minimal, com- 
pare a ce qui aurait ete requis en utilisant un langage comme le C++... 
XUL est en fait de la reutilisation de savoirs deja existants, sous une 
forme legere, modulaire, facile a comprendre et a faire evoluer. 

Que faire maintenant ? 

Je ne vois qu’une seule chose : trouver une idee originale et ecrire votre 
propre extension ! 


Pour aller plus loin Une version web 

Ce sera la derniere remarque... nous n'avons pas eu I'occasion de traiter 
d'une adaptation au format web. En effet, les limitations sont assez 
enormes pour envisager du « remote XUL » (ou XUL distant) : pas de 
composants XPCOM par exemple a disposition, pas plus que de fichiers 
DTD. La seule solution pour avoir acces a toutes les fonctionnalites 
d'une extension placee dans du chrome est de signer, a I'aide de certifi- 
cats de securite, I'application (ou de baisser volontairement le niveau de 
securite de Mozilla, une pratique tres dangereuse). Les deux premiers 
liens, sur les sites mozilla.org et xulfr.org vous permettront d'essayer 
cette technique. Le dernier decrit les limitations du XUL distant. 

► http://www.mozilla.org/projects/security/components/signed-scripts.html 

► http://xulfr.org/wiki/ApplisWeb/SignerUneAppli 

► http://xulfr.org/wiki/ApplisWeb/LimitationsDeXul 
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Firefox 1 .5 et au-dela 
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SeaMonkey 1.0a 

Mozilla/5.0 (XI 1; U; Linux i686; en-US; rv:1.8M) Gecko/20050717 SeaMonkey/1 ,0a 


♦ Copyright © 1998-2005 by Contributors to the Mozillacodebase under the Mozilla Public License and Netscape Public License . All Rights 
Reserved. 

♦ Portions of this software are copyright © 1994 The Regents of the University of California All Rights Reserved. 

♦ Portions of this software are copyright © 2000-2002 Japan Network Information Center. All Rights Reserved. 

♦ This software may contain portions that are copyright © 1998-2002 SupportSoft, Inc. All Rights Reserved. 

U.S. GOVERNMENT END USERS. The Software is a "commercial item," as that term is defined in 48 C.F.R. 2.101 (Oct. 1995), consisting of "commercial computer 
software" and "commercial computer software documentation," as such terms are used in48 C.F.R. 12.212 (Sept. 1995). Consistent with 48 C.F.R. 12,212 and48 C.F.R. 
227.7202-1 through 227.7202-4 (June 1995), all U.S. Government End Users acquire the Software with only those rights set forth herein. 
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Firefox 1.5 etait initialement prevu pour le 5 juillet si Ton en croit cette 
roadmap : http://wiki.mozilla.org/MozillaReleasePlanning. Elle a ensuite ete 
remaniee pour indiquer que Firefox 1.5 etait prevu pour « Summer 
2005 ». S’il n’y a pas de bogues de derniere minute, des « major 
regressions » ou des « blockers » comme on les appelle dans le jargon 
mozillien, on peut raisonnablement esperer que la sortie de cet ouvrage 
coincidera avec la sortie de Firefox 1.5. 

Le travail sur le chapitre 4 a ete commence alors que Firefox 1.5 n’etait 
encore qu’une idee, ce qui explique qu’il sera principalement destine a 
Firefox 1.0 : le premier paragraphe de cette annexe vise a indiquer la 
procedure pour transformer vos premiers fichiers XUL en extension, en 
supposant que vous utilisez Firefox ou Thunderbird en version 1.5. 
Mozilla 1.x ou SeaMonkey quant a lui utilise toujours le mecanisme des 
fichiers RDF 

Une autre partie de l’annexe signale les modifications mineures qu’il a 
fallu apporter pour passer a la version 1.5. 

II n’y a plus de contents.rdf dans 
Firefox 1.5 et Thunderbird 1.5 

Pour developper 

C’est avec un soupir de soulagement que tous ceux qui ont developpe sur 
Firefox 1.0 Front ce titre. En effet, chrome, rdf n’est plus et installed- 
chrome.txt ne sert plus ! II n’y a plus que des fichiers manifest dans le 
chrome. 

Le fichier xul forum. manifest, a placer dans le dossier chrome de Firefox 
1.5, ressemblera a ceci : 


firefox/chrome/xulforum.manifest 

content xulforum fi1e:///mnt/data/Livre/xu1forum/content/ 

skin xulforum classic/1.0 fi1e:///mnt/data/Livre/xu1forum/skin/ 

locale xulforum fr-FR fi1e:///mnt/data/Livre/xu1forum/1oca1e/fr-FR/ 

overlay chrome://g1oba1/content/customizeToo1bar.xul chrome: //xul forum/content/ palette-over lay .xul 
overlay chrome : //browser/content/browser .xul chrome ://xul forum/content/fi refox-overl ay . xul 
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Celui pour Thunderbird sera a peu de choses pres le meme : 

thunderbird/chrome/xulforum.manifest 

content xulforum file:///mnt/data/Livre/xulforum/content/ 

skin xulforum classic/1.0 file:///mnt/data/Livre/xulforum/skin/ 

locale xulforum fr-FR file:///mnt/data/Livre/xulforum/locale/fr-FR/ 

overlay chrome ://messenger/content/messenger .xul chrome: //xulforum/ content/messenger-over lay .xul 
overlay chrome://global/content/customizeToolbar.xul chrome : //xul forum/content/palette-overl ay .xul 

Ces fichiers decrivent sous une forme tres simple les ajouts au chrome 
initial. Ils sont beaucoup plus faciles a comprendre que les fichiers RDF : 
d’abord, on decrit le contenu du paquet xulforum, avec le chemin vers le 
dossier adequat. Ensuite, on trouve le paquet de XUL Forum, un skin - le 
skin classique - et le chemin vers le dossier (remarquez qu’en toute 
rigueur il aurait fallu placer les fichiers CSS dans le dossier skin/classic 
de xulforum, pour ensuite pouvoir ajouter skin/modern, etc.). Enfin, vient 
la locale, qui s’utilise de la meme maniere que l’habillage. Et en dernier, 
les overlays, avec d’abord le fichier qui est « overlaye » (vous trouverez le 
terme « overlaid » dans certains documents en anglais sur le sujet) et 
ensuite le fichier de XUL Forum qui contient l’overlay a appliquer. 

Une fois presents dans le dossier chrome et Firefox redemarre, chrome:// 
xulforum/content/ sera immediatement accessible. 

Tous les details sur ce nouveau format de fichier sont disponibles sur le 
site mozilla.org : 

► http://www.mozilla.org/xpfe/ConfigChromeSpec.html 


Pour installer 

Les fichiers install, rdf ont ete eux aussi simplifies, toujours dans 
l’optique d’un passage aux fichiers au format manifest. Mais attention ! 
Si vous suivez la « nouvelle methode » pour l’installation de l’extension 
sur Firefox ou Thunderbird version 1.5, vous casserez la compatibilite 
avec les versions anterieures, alors qu’en gardant la methode utilisee au 
chapitre 13, vous serez assure d’etre compatible avec des versions de 
Firefox allant de 0.9 a 1.5. En effet, Firefox 1.5 creera tout seul les 
fichiers au format manifest qui lui sont necessaires, a partir du fichier 
i nstal 1 . rdf. 


Pour aller plus loin 

Le fonctionnement interne 
du gestionnaire d'extensions 

► http://www.mozilla.org/projects/firefox/ 
extensions/em-changes.html 


Pour aller plus loin Plusieurs paquets dans un seul fichier XPI 

Cette page du site mozilla.org vous permettra d'approfondir le sujet. Versions recentes 
uniquement ! 

► http://wiki.mozilla.Org/Extension_Manager:Multiple_ltem_Packages 
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Si vous voulez quand meme installer « a la fapon » 1.5, il suffit de sup- 
primer l’element <em:file> dans le fichier install .rdf et d’ajouter un 
fichier chrome .mani fest a la racine du XPI. 


xulforum.xpi/chrome.manifest 

content xulforum jar : chrome/xul forum . jar!/content/ 

skin xulforum classic/1.0 jar:chrome/xulforum. jar!/skin/ 

locale xulforum fr-FR jar:chrome/xulforum. jar!/locale/fr-FR/ 

overlay chrome ://gl obal/content/customi zeTool bar . xul chrome : //xul forum/content/pal ette-overl ay . xul 
overlay chrome : //browse r/content/browser .xul chrome ://xul forum/content/fi refox-overl ay . xul 


Ici, au lieu de pointer vers des dossiers, on pointe vers le fichier JAR et 
on indique, parmi les dossiers qu’il contient, celui qui est concerne. 


Culture Protocole JAR 

Si vous etes amene a developper une application XUL dans un contexte web, vous pourrez 
empaqueter I'ensemble de vos fichiers dans un paquet JAR, puis y acceder via I'URL 
jar:http://localhost/~jonathan/xulforum/dist/chrome/xulforum. jar i/content/ 
xulforum. xul (URL a taper dans la barre d’adresse, avec le bon chemin vers votre fichier 
xulforum.jar). 


Un petit nouveau... XUL Runner ! 

► http://wiki.mozilla.org/XUL:Xul_Runner XUL Runner est un projet tres prometteur : il s’agit d’un environnement 

autonome d’execution pour applications XUL. En simplifie, XUL Runner 
est comme Firefox, mais debarrasse de tous les fichiers propres a la naviga- 
tion. Il sert pour les gens qui ne veulent pas installer Firefox ou Thunder- 
bird mais qui souhaitent tout de meme pouvoir lancer des applications 
XUL. Il utilise des fichiers portant l’extension .ini (pour l’instant), exten- 
sion qui pourra plus tard etre renommee en .xulapp, afin de permettre une 
association entre fichiers et applications sur les systemes Windows. 

L’objectif est, a terme, de concevoir Firefox, Thunderbird, comme des 
applications XUL s’executant dans le cadre de XUL Runner. Il n’y aurait 
alors plus qu’un seul GRE ( Gecko Runtime Environment) en memoire, 
d’ou des gains non-negligeables. 

Il existe des « nightlies » de XUL Runner disponibles sur le serveur FTP 
de mozilla.org ; vous pouvez aussi le compiler vous-meme en utilisant le 

► http://xulfr.org/wiki/XulRunner script de XUL Fr. Aux dernieres nouvelles, en modifiant legerement le 

script de XUL Fr pour ajouter le support LDAP (avec ac_add_options - 
-enable-1 dap), notre application XUL Forum fonctionne integralement 
dans XUL Runner ! 
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Nous allons « porter » XUL Forum pour XUL Runner : c’est en fait tres 
simple. Dans le dossier xf-xr (pour « xulforum-xulrunner »), il nous faut : 

• xf-xr/appl i cation . i ni 

• xf-xr/chrome/chrome . mani fest 

• xf-xr/chrome/xul forum. jar 

• xf-xr/defaul ts/preferences/xul fo rum- p refs . js 

i 

< 



Figure A-1 XUL Forum fonctionne integralement dans XUL Runner (sous reserve du support LDAP active). 
Vous remarquerez la difference de style des boutons « OK » et « Annuler », ainsi que les erreurs 
qui surviennent avec les caracteres accentues. 


application.ini 

[App] 

Vendor=Eyrol les 

Name=XUL Forum 

Version=1.0 

Bui 1 dID=200 5071814 

ID={540e3545-c647-4fe0-b536-a0d728d6f641} 

[Gecko] 

MinVersion=1.8 
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Les noms des parametres parlent d’eux-memes. Le BuildID est sous la 
forme yyyymmddhh. C’est le meme qui est utilise pour identifier les 
« nightlies » de Mozilla. Pour le widget XBL, une version de Gecko 
superieure ou egale a 1.8 est requise. 

chrome.manifest 

II est exactement identique a celui utilise pour l’installation, avec les 
overlays en moins. On distribue XUL Forum dans un JAR, pour plus de 
commodite, mais on aurait aussi pu ne pas compresser l’application. Le 
fichier manifest aurait alors ressemble a celui que vous utilisez dans 
Firefox 1.5, montre en debut d’annexe. 

content xulforum jarixulforum. jar!/content/ 

skin xulforum classic/1.0 jarixulforum. jar!/skin/ 

locale xulforum fr-FR jarixulforum. jar ! /I ocal e/f r-FR/ 

xulforum-prefs.js 

pref (" javascri pt . options. showInConsole" , true) ; 
pref (" javascri pt .opti ons . stri ct" , true) ; 
pref ("browser .dom.wi ndow. dump. enabl ed" , true) ; 
pref ("tool kit . defaul tChromeURI" , 

"chrome : //xul forum/content/xul forum. xul ") ; 

Les trois premieres lignes ne sont que des informations de debogage. En 
revanche, la derniere est essentielle. En effet, il n’y a ni page de demar- 
rage, ni barre pour saisir une adresse dans XUL Runner. II faut done 
specifier dune autre maniere l’URL de la page par defaut de XUL 
Forum : c’est le role de la quatrieme ligne. 

Lancer (’application 

Sous Unix, vous devrez simplement taper /chemin/vers/le/binai re/ 
xulrunner /chemi n/vers/xf-xr/appl i cation . i ni et si vous avez bien 
suivi la structure precedente, l’application devrait se lancer sans aucun 
probleme. Sous Windows, la procedure est la meme, a ceci pres que vous 
devrez utiliser le shell de Windows (accessible via le menu Demarrer>Exe- 
cuter, et en saisissant cmd) ou renommer votre fichier .ini en .xulapp et 
l’associer avec le binaire de XUL Runner. 
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Une valeur sure : SeaMonkey 

Parallelement a Firefox 1.5 et Thunderbird 1.5 se developpe (nous 
l’avons deja mentionne) SeaMonkey, le successeur de la suite Mozilla, 
projet communautaire profitant du soutien logistique de la Fondation. 

XUL Forum fonctionnera sans probleme avec les dernieres « nightlies » 
de SeaMonkey (disponibles sur le serveur FTP de mozilla.org, dans le 
dossier pub/mozil la.org/seamonkey/nightly/latest-trunk/). 


A File Edit View Go Bookmarks lools Window Help Debug (}A 


. Q 0 Q Q Q 

> 

B 

|^- about: Q| search | 


^ -Si Home tDBookmarks ^ mozilla.org ^ mozillaZine ^ mozdev.org 



SeaMonkey 1.0a 

Mozilla/5.0 (XI 1; U; Linux i686; en-US; rv:1.8M) Gecko/20050717 SeaMonkey/1 ,0a 


• Copyright© 1998-2005 by Contributors to the Mozilla codebase under the MozillaPublic License and Netscape Public License . All Rights 
Reserved. 

• Portions of this software are copyright © 1994 The Regents of the University of California. All Rights Reserved. 

♦ Portions of this software are copyright © 2000-2002 Japan Network Information Center. All Rights Reserved. 

♦ This software may contain portions that are copyright © 1998-2002 SunnortSoft, Inc. All Rights Reserved, 

U.S. GOVERNMENT END USERS. The Software is a "commercial item/’ as that term is defined in 48 C.F.R. 2.101 (Oct. 1995), consisting of " commercial computer 
software" and "commercial computer software documentation/' as such terms are used in 48 C.F.R. 12.212 (Sept. 1995). Consistent with 48 C.F.R. 12.212 and 48 C.F.R. 
227.7202-1 through 227.7202-4 (June 1995), all U.S. Government End Users acquire the Software with only those rights set forth herein, 
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Figure A-2 Le projet SeaMonkey est encore tres experimental... tout comme son logo ! 
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B.A.-BA Scalable Vector Graphics 

SVG est un format d'image, au meme titre 
que JPEG, PNG... La seule difference avec 
les deux precedents est que c'est un format 
d'image vectoriel ; on ne decrit pas I'image 
pixel par pixel, mais on en decrit les 
formes : une courbe, de tel angle, qui va des 
coordonnees (xl, yl) aux coordonnees (x2, 
y2), un rectangle, une ligne, un degrade... 
On n'a done aucun effet de crenelage 
lorsqu'on zoome sur I'image et, surtout, 
SVG est au format XML, ce qui rend sa 
manipulation possible par DOM. 

SVG est quasiment implements dans 
MiniMo, la version de Mozilla pour PDA. 

► http://weblogs.mozillazine.org/tor/ 
arch i ves/2005/04/i ndex. htm I 


De nouvelles voies : SVG et <canvas> 

Les dernieres innovations ont aussi vu arriver un renouveau des API de 
dessin dans Mozilla : un meilleur support du SVG est desormais dispo- 
nible, grace a Cairo, et un nouveau tag HTML permet de faire du dessin 
en JavaScript. L’URL suivante vous permettra de tester <canvas>, le 
nouveau tag HTML : 

► http://developer-test.mozilla.org/presentations/xtech2005/svg-canvas/ 
CanvasDemo.html 


Pour aller plus loin Cairo en toolkit 

Dans Mozilla, les menus, les widgets, les boTtes de dialogue sont congus 
en utilisant la bibliotheque graphique GTK2 (http://www.gtk.org), GTK 
signifiant « The Gimp ToolKit ». II existe d'autres toolkits, comme GTK1 
(la suite Mozilla est disponible dans les deux versions) mais surtout 
Cairo. Cairo est une bibliotheque de composants graphiques capable 
d'afficher sur de nombreux supports : PNG, X1 1 ... On peut d'ores et deja 
utiliser Cairo comme toolkit experimental (a compiler soi-meme I). Le 
developpeur principal reconnait son affreuse lenteur, mais une coopera- 
tion est prevue entre les equipes de Cairo et de Mozilla pour ameliorer 
sa rapidite afin de, a terme, remplacer GTK2 par Cairo (le projet GTK2 
prevoit de toutes fa^ons d'utiliser aussi un jour Cairo comme moteur de 
rendu). 

La question qui se pose est de connaitre I'interet d'un tel changement... 
pour le savoir, il faut aller voir les explications du responsable de ces 
operations, Robert O'Callahan : 

► http://weblogs.mozillazine.org/roc/archives/2005/06/ 
graphics_though.html#comments 

► http://www.cairographics.org 

► http://developer-test.mozilla.org/presentations/xtech2005/svg-canvas/ 

une presentation de Xtech 2005 du meme auteur, qui fait le point sur 
la situation, avec de tres jolis exemples... a voir absolument ! 


Pour les scripts : 

► http://wiki.m 0 zilla. 0 rg/SVG:Script 
Pour des exemples de fichiers SVG : 

► http://www.croczilla.com/svg/samples 


Qu’imaginer pour XUL Forum ? 

• Grace a SVG, un logo pour la page d’accueil, qui serait eventuelle- 
ment anime grace a JavaScript. 

• Grace a lelement <canvas>, un ecran d’identification entierement 
dessine : 

► http://developer-test.mozilla.org/en/docs/Drawing_Graphics_with_Canvas 
A quand une interface utilisateur de Mozilla entierement dessinee ? 
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Figure A-3 

XUL Runner lanqant un « mini navigateur » 
(MyBrowser) qui pointe vers une image SVG (XUL 
Runner compile avec support SVG) 


Enfin, dernier exemple, que tout lecteur se doit d’avoir vu au moins une 
fois, la splendide application de dessin (oui, de dessin) vectoriel, en SVG 
et XBL, de Doron Rosenberg (aussi en charge du bogue WSDL). Creez 
vos formes, manipulez-les, le tout dans une application Mozilla. 

► http://weblogs.mozillazine.org/doron/archives/008187.html 


Des modifications mineures 

Si Ton ne tient pas compte du fait que le widget XBL n’est pas compatible 
avec Gecko 1.7 (qui a tout de meme plus d’un an !), le reste de l’applica- 
tion passe sans probleme avec Gecko 1.8, a quelques exceptions pres. 

• On trouve un probleme concernant le support de l’element 
<progressbar>. Le rapport de bogue, consultable sur https://bugzilla. 
mozilla. org/show_bug.cgi?id=266459, mentionne un correctif qui, theori- 
quement, ne devrait plus etre necessaire. Cependant, pour retablir le 
comportement normal de cette fonction, il nous a fallu ajouter dans 
le fichier xul forum. css ces quelques lignes (testees en dernier sur 
Lirefox 1.5 alpha 1) 

progressmeter[mode="undetermi ned"] { 

-moz-bi ndi ng : 

url ("chrome : //global /content/bi ndi ngs/progressmeter . xml#progressmeter- 
I undetermi ned") ; 

} 
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• Etrangement, dans Thunderbird seulement, la methode open() uti- 
lisee dans les overlays pour ouvrir une fenetre pop-up contenant XUL 
Forum gele l’application (la version concernee est Thunderbird 1.5 
alpha 1). openDialogO, au comportement similaire, n’a pas ce pro- 
bleme, mais gele Thunderbird en version 1.0. 

• On regrette aussi une difference des parametres utilises avec la 
methode getCellTextO, deja evoquee au chapitre sur XBL. 
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Liste des composants 
XPCOM utilises 



Tout au long de la seconde moitie de ce livre, nous 
avons utilise intensivement les composants XPCOM, 
ainsi que leurs interfaces. Un tableau synthetique des 
composants utilises vous permettra de vous reporter 
au chapitre concerne et de retrouver rapidement un 
composant si vous aviez oublie son nom. 


www.frenchpdf.com 


Les Cahiers du programmeur 


X 


La procedure generate pour instancier un composant est la suivante : 

1 Trouver le composant et aller sur le site de XULPlanet.com ; dans la reference XPCOM, 
reperer l’interface qui sera utile. 

2 Instancier ce composant et demander l’interface choisie. 

var c = Components. classes["@votre. org/composant/contractid ; 1"] . createlnstanceO ; 
var i = c. QueryInterface(Components. interfaces. nsIVotrelnterface) ; 

ou en raccourci : 

var i = Components. classes["@votre.org/composant/ 

contract! d ; 1"] .createlnstanceO .Query Inter face (Components . i nterfaces . nsIVotrelnterface) ; 

Si c’est un service (le mot « service » se retrouvera dans le nom du composant le plus generalement), 
la procedure est la suivante : 

var i = Components. classes["@votre. org/composant/cidservi ce ; 1"] . 
getServi ce(Components . i nterfaces . nsIVotrelnterface ) ; 

3 Vous pouvez appeler les methodes offertes par l’interface sur la variable i . 


Tableau B-1 Les composants XPCOM utilises dans le code de XUL Forum 


Contract ID du composant 

Interface(s) utile(s) 

Description 

Utilise au chapitre 

@mozi "li a . org/moz/j ssubscri pt-1 oader ; 1 

mozIISSubscriptLoader 

Pour inclure d'autres fichiers 
JavaScript a la maniere d'un 
#include. 

Fin du chapitre 7 

@mozi 11a.org/rdf/rdf -service; 1 

nsIRDFXMLSink 
nsIRDFRemoteDataSource 
nsIRDFServi ce 

Pour controler la mise a jour, le 
rechargement d'une source 

RDF. 

Seconde moitie du 
chapitre 8 

@mozi iia.org/preferences-service; 1 

nsIPrefService, 

nsIPrefBranch 

Pour acceder aux preferences 
internes. 

Chapitre 9 

@mozi i i a . org/embedcomp/prompt- 
service;l 

nsIPromptService 

Boites de dialogue systeme. 

Chapitre 9 

@mozi i i a . org/network/i dap-connecti on ; 1 

nsILDAPConnection 

Pour se connecter a LDAP. 

Chapitre 10 

<amoziiia.org/network/idap-uri ;1 

nsILDAPURL 

Pour Stocker les informations 
relatives a une connexion LDAP. 

Chapitre 10 

@mozi iia.org/event-queue- service; 1 

nsIEventQueueService 

Utilisation tres particuliere due 
a une implementation en C qui 
necessite une file d'attente. 

Chapitre 10 

@mozi i i a . org/xpcomproxy ; 1 

nsIProxyObjectManager 

Chapitre 10 

@mozi iia.org/network/idap-operati on ; 

nsILDAPOperation 

Pour obtenir une operation 

LDAP. A appeler avant de 
proceder a un bi nd ou a 
une recherche. 

Chapitre 10 
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Tableau B-2 Les composants XPCOM pouvant servir un jour 


Contract ID du composant 

Interface(s) utile(s) 

Description 

URL d'un guide d’utilisation 

@mozi 1 1 a. org/fi 1 epi cker; 1 

nsIFilePicker 

Pour choisir un fichier 
(boTte de dialogue 
systeme : "Ouvrir"). 

http://kb.mozillazine.org/ 

Dev_:_nslFilePicker 

@mozi lla.org/fil e/local ;1 

nsILocal Fi le 

Pour acceder a des 
fichiers sur le disque dur. 

http://kb.mozillazine.org/ 

Dev_:_Extensions_: _Example_Code_: 
_File_IO 

©mozilla. org/process/util ;1 

nsIProcess 

Pour lancer des 
applications. 

http://kb.mozillazine.org/ 

Running_applications 

@mozilla.org/widget/dragservice;1 

nsIDragSession, 

nsIDragService 

Glisser/deposer avec des 
elements XUL. 

http://xulplanet.com/tutorials/xultu/ 

dragdrop.html 

http://xulfr.org/wiki/DragNDrop 

@mozi 11a. org/network/ 
socket-transport-servi ce ; 1 

nsISocketT ransport 
Service 

Connexions avec 
sockets. 

http://xulplanet.com/tutorials/mozsdk/ 
sockets. PHP 

@mozi 11a. org/sound ; 1 

nsISound 

Sons systeme. 

h ttp ://www.x u lplanet.com/references/ 
xpcomref/comps/c_sound1 .html 


Vous pourrez retrouver de nombreux exemples de code sur la base de connaissance de MozillaZine, 
avec d’autres composants plus techniques, non decrits ici. 

► http://kb.mozillazine. 0 rg/Category:Example_code 


Pour aller moins (!) loin JSLib 

Les quelques composants donnes comme « pouvant etre utiles » sont ceux qui possedent au moins une page didac- 
tique expliquant leur fonctionnement, avec exemples. Vous pouvez en reperer d'autres sur la reference XPCOM de 
XUL Planet. Mais vous n'etes pas certain de trouver un guide d'utilisation ! La solution la plus efficace consiste alors a 
rechercher un cas d'utilisation de ce composant dans un fichier .js de Mozilla, grace a LXR. 

II existe cependant une alternative, elle s'appelle la JSLib : « JavaScript Library ». El le a ete volontairement « non- 
evoquee » car elle est trop enveloppante vis-a-vis de la logique interne de Mozilla : elle masque en effet tous les com- 
posants XPCOM et propose une « sur-couche ». L'exemple de code ci-dessous est tire de la page d'introduction : il 
simplifie enormement le travail necessaire si I'on devait n'utiliser que les composants XPCOM. 

jslib.init(this) ; 

include (jslib_file) ; 

var file = new File("c:\\tmp\\foo.dat") ; 

fi le . open("w") ; 

file.write("This is a test\n"); 
file.closeO ; 

Une fois que vous aurez bien acquis la logique XPCOM, vous pourrez vous permettre de vous faciliter le travail avec la 
JSLib, qui ne vous impose pas de connaitre parfaitement le fonctionnement du composant XPCOM requis. Ce n'est 
cependant pas une solution miracle ! C'est simplement un projet d'abstraction ecrit en JavaScript et il ne couvre pas 
tous les composants... 

► http://jslib.mozdev.org 
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* Le dossier servant a preparer une extension hstsiable (chapitre 13) 

» chrome Le dossier chrome, purement structurel, du tichier hstalable 

gaxulforum.jar Le .jar contenant les fichiers de I'extension : content, locale, skin 
! ID chrome, manifest Le fichier manifest pour Firefox / Thunderbird 1.5 (faaitatiO 

ij*) install, js Le script d'installation pour Mozla / SeaMonkey, Firefox / Thinderbird < 0.9 

I install. rdf Le fichier RDF d'installation pour Mozila pour Firefox / Thunderbrd >= 0.9 

(id xuiforum.xpi Le fichier final, installable 

Siwww * Le dossier a placer dans le serveur web 

S .htaccess Le fichier special .htaccess, pour associer les bons types 
| ®erreur,rdf Fichier RDF de secours foumi en cas d'erreur sur rdf messages, php (chapitre 8) 

SO global, inc. php Fichier contenant les informations de configuration : hote MySQL, mots de passe, l 

| Qparams.xml Les parametres, en XML, rapatries par Javascrpt (chapitre 7) 

! ttrdf.php Bonus : la liste des messages en RDF 

i nSrdfmessages.php RDF pour rempSr I'arbre des messages (chapitre 8) 
j Bsoap.php Serveur SOAP (chapitre 12) 

no time. php Astuce pour e viter des decalages de temps (voir code du chapitre 8) 

® update. rdf Pour signaler des rmses a jour 6ventueles de I'e^gsgss 

gxfserveur.wsdi Pour une ^ventuele version WSDL (chapitre 12) © © | Les fichiers de xi 

gjxuiforum * Les fichiers pour Mozla 

► Qicontent Le contenu : Javascrpt, XLL, overlays, XBL N ™ e .. 

►Ejiocaie L'internationalisation : fichiers de langue pour lav T ' 

► Ifiiskin L'apparence : fichiers CSS, images 
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Les fichiers de XUL Forum 

*Le contenu 

Le fichier RDF pour enregistrement (non utise dans Firefox / Thunderbird 1.5) h 
L' overlay pour les boutons de la barre d'outis (Firefox uniquement) 67 

L'ecran principal du forum : fete des membres et arbre des messages is 

Overlay avec barres d'outis et de statut 10 

Overlay avec I'arbre des messages 19 

Overlay avec la fete des membres 12 

* Les fichiers javascript 

Recup4rer les fichiers de configuration (chapitre 7) 21 

Routines de gestion de I Interface potx ndex.xii 76 

Routines de gestion d'erreur (chapitre 7) 74 

Routines de gestion de IViterface pour xtiforum.xul 59 

Acces au serveur LDAP (chapitre 10) 67 

Acc£s aux preferences (chapitre 9) 16 

Gestion des sources RDF (chapitre 8) 2s 

Les routines SOAP (chapitre 12) 52 

Overlay avec les menus (index. xul et identification.xul) 22 

L’overlay pour les boutons de la barre d'outis (Thunderbird uniquement) 85 

L’overlay pour I'entree Outils > Options > XUL Forum (Mozla uniquement) 37 

L’overlay pour l'4cran de personnafeaOon de la barre d’outis (Thunderbird uniquement) si 

* Les fichiers XBL 

Notre widget fenetreMsg 10 

L'ecran dTdentification (page par d§faut de chrome ://xJforum/content/) 37 

* La localisation 

* Fichiers de langue anglaise 

* Fichiers de langue frangaise 

Enregistrement par fichier RDF (pas pour Firefox / Thunderbird 1.5) 61 

Les chafrtes pour Javascrpt (a utlser avec <sthngbunde>) 85 

Les cha'nes pour le fichier XUL (a utlser avec Snomdelachaine;) 24 

* L'apparence 

Le bouton a trois etats pour la barre d'outis 39 

Le bouton pour le gesdonnare d’extensions 27 

Le bouton a trois etats pour la barre d'outis avec les petites icones 21 

Enregistrer le skin aupres de Frefox / Thunderbird <= 1.0 so 

* Les differentes icones pour la barre d'outis de XUL Forum 

Les styles utises dans l'overlay pour la barre d'outis 57 

La petite icone utisee dans la fete des membres, sur index.xul 10 

Les styles globaux pour XUL Forum 35 


O QOqq® 

I Last Modified |CS 

31/07/2005 22:53:42 R 

31/07/2005 22:53:42 I 

31/07/2005 22:53:42 I 

31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 
31/07/2005 22:53:42 _ 


www.frenchpdf.com 


Les Cahiers du programmeur XUL 



270 


www.frenchpdf.com 


Figure C-1 Les fichiers de XUL Forum (premiere partie) 
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Figure C-2 Les fichiers de XUL Forum (deuxieme partie) 
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CSS : syntaxe, 
selecteurs, proprieties 


D 


Vous l’aurez compris, CSS est crucial dans le processus de developpe- 
ment dune application Mozilla. Sans CSS, il est impossible d’obtenir 
une boite de dialogue « A propos » digne de ce nom, avec un titre 
agreable a l’oeil et une mise en forme structuree, une image placee cor- 
rectement... On utilise d’ailleurs souvent CSS sans meme le savoir : 
appliquer l’attribut orient="vertical" sur une balise <box> revient tout 
simplement a mettre sa propriete CSS -moz-box-orient a "vertical". 

Nous nous proposons done de dresser un aperipi tres rapide de la syntaxe 
de base de CSS, puis nous verrons les differents selecteurs, pour enfm 
effectuer un tour d’horizon rapide des proprietes les plus utilisees. 


Attention Exhaustivite 

Nous ne detaillons id que les elements de syntaxe les plus courants (des unites comme ex ne 
sont par exemple pas expliquees, les compteurs non plus). Pour une reference complete, vous 
pourrez vous reporter au tres bon ouvrage cite ci-dessous, ou aux documents du W3C, qui ser- 
vent de reference a cette annexe (fondee sur la norme CSS version 2.1, voir a ce propos I'histo- 
rique du chapitre 6). 

► http://www.w3.org/TR/CSS21/ 

01 CSS 2, Raphael Goetter, Eyrolles 
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Syntaxe de base de CSS 

La syntaxe CSS vous sera tres certainement familiere ; il peut neanmoins 
s’averer utile de redonner les regies de base. Une declaration CSS suit la 
forme suivante : 

selecteur { propriete: valeur; } 

Nous verrons les differents types de selecteurs dans la deuxieme partie de 
cette annexe et les differents types de proprietes dans la troisieme. 

II existe differents types de valeurs : 

• Les nombres, par exemple : z-i ndex : 3 ; 

• Les longueurs : elles sont composees d’un nombre suivi dune unite ; 
par exemple : border-width: 3px;. II existe plusieurs types d’unites : 

- Les unites relatives, c’est-a-dire exprimees en fonction d’autres 
unites. Les plus courantes sont em et px. font-size: 2em; indique 
que la taille de la police sera deux fois plus grande que la taille 
« normale », qui lui aurait ete assignee en l’absence de cette declara- 
tion. Quant a px, il exprime des pixels, dont la taille depend du 
peripherique de visualisation (les pixels d’un ecran de television 
n’ont en effet pas la meme taille que ceux d’un ecran d’ordinateur). 

- Les unites absolues qui ne varient jamais quelles que soient les 
conditions exterieures. Il y a, entre autres, cm (centimetres), mm 
(millimetres), in ( inches , pouces anglais, 2,54 cm). 

• Les pourcentages : font-size: 200% 

• Les URL: 

list-style-image: url (http://www.examp1e.com/puce.png) ; 
(l’utilisation de guillemets est facultative) 

• Les couleurs (voir la liste en figure D— 1) : color: blue; (ce sont des 
mots-cles, a ne pas utiliser entre guillemets). Les autres manieres de 
defmir une couleur ont aussi deja ete vues dans ce livre : color: #0000f 
ou #00f en abrege, rgb(0, 0, 255) ou encore rgb(0, 0, 100%). 

• Les chaines, a placer entre guillemets simples ou doubles. 

Il est possible de regrouper differents selecteurs. Ainsi : 

si { declarationl } 
s2 { declarationl } 
s3 { declarationl } 

est equivalent a : 
si, s2, s3 { declarationl } 
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4.3.6 Colors 

A <color> is either a keyword or a numerical RGB specification, 

The list of keyword color names is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, 
red, silver, teal, white, and yellow. These 17 colors have the following values: 


maroon 

red 

orange 

yellow 

olive 

#800000 

#ffoooo 

#ffA500 

#ffff00 

#808000 

purple 

fuchsia 

white 

lime 

green 

#800080 

#ff00ff 

#ffffff 

#00ff00 

#008000 


navy teal 

#000080 BEKl #008030 


black 


silver 

#c0c0c0 


gray 

#808080 


In addition to these color keywords, users may specify keywords that correspond to the colors used by certain 
objects in the user's environment. Please consult the section on system colors for more information. 


Figure D-1 


-’ey 


Cl 

O 

O. 


I 

O 


De meme : 

si { declarationl } 
si { declaration } 
si { declarations } 

est equivalent a : 
si { 

declarationl; 
declarations ; 
declarations ; 

} 

II serait impossible de tout detailler ici ; les fai^ons d’inclure une feuille 
de style dans un document, la priorite des styles dans la cascade, les ele- 
ments de type bloc et inline. Cette annexe n’est qu’un aperipi rapide ; 
pour vous former efficacement a CSS, il vous faudra acquerir un livre 
consequent sur le sujet. 
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Les selecteurs 


Rappel Selecteur ! important 

Veillez a ne jamais oublier ce mot-de qui, ecrit apres la valeur d'une propriete, la placera 
le plus haut possible dans la cascade CSS, permettant ainsi d'ecraser des styles specifies 
par le navigateur, le theme... Si une propriete semble ne pas s'appliquer, essayez toujours 
avec ! important. 


Selecteur 

Signification 


Selecteur universel : s'applique a tous les elements. * { font-family: Arial , 
sans-serif }. 

1 abel 

La regie s'applique a un type d'element particulier. label { font-size: 200%; } 
double la taille de tous les elements <1 abel />. 

vbox label 

La regie s'applique a tous les <1 abel /> contenus dans une <vbox>. Cela indut <vbox> 
<label /> </vbox> mais aussi <vboxxhboxxl abel /x/hboxx/vbox>. 

vbox > label 

La regie s'applique a tous les <1 abel /> directement enfants d'une <vbox> : 
<vboxxlabel /x/vbox> mais pas <vboxxhboxxl abel /x/hboxx/vbox>. 

label : pseudo-classe 

La regie s'applique a une pseudo-classe de I'element <label>. Les pseudo-classes sont 
definies au tableau suivant. 

label + description 

La regie s'applique aux elements <descri ption> immediatement precedes d'un 
clabel /> (la mise en forme ne concerne pas le <1 abel /> mais uniquement le 
<descri ption>). 

tree [datasources] 

La regie s'applique a tous les arbres dont I'attribut datasources a ete specifie (quelle 
que soit sa valeur). 

tree [datasources=" rdf: null"] 

La regie s'applique a tous les arbres dont la valeur de I'attribut datasou rces est exacte- 
ment " rdf : nul 1 

wi ndow[persi st~="screenX"] 

La regie s'applique aux fenetres pour lesquelles la position a I'ecran selon I'axe des X est 
gardee en memoire. S'applique a <wi ndow persi st="screenX" mais aussi a 
<wi ndow persi st="screenX screenY" (la liste de valeurs doit etre separee par 
des espaces). Dans le cas d'une liste de valeurs separees par des tirets, on utilisera |= a la 
place de ~=. 

tree#xf-i ndex-arbre 

La regie s'applique a tous les arbres dont I'identifiant est egal a "xf-i ndex-arbre". 

On connait aussi #xf-i ndex-arbre, forme abregee de *#xf-i ndex-arbre. 

label .titre 

La regie s'applique a tous les <1 abel> dont la classe est "titre". Semantiquement 
equivalent a label [class~="ti tre"] . On utilise aussi .titre, abrege de * . ti tre. 


Les pseudo-classes sont fort utiles, mais pas toujours implementees dans 
les elements XUL. Un test rapide vous dira tout de suite si l’effet que 
vous recherchez est possible ou non. 
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Pseudo-classe 

Description 

fi rst-chi Id 

(exemple : vbox: fi rst-chi 1 d) 

Attention ! Ceci ne designe pas le premier element d'une boite verticale, mais une boite 
verticale qui est le premier element de son parent, vbox : f i rst-chi 1 d s'appliquera a 
<hboxxvbox /></hbox> mais pas a <hboxxl abel /xvbox /x/hbox>. 

Pour selectionner le premier element fils d'une boite verticale, on aurait utilise : 
vbox > *: fi rst-chi 1 d 

link, vi si ted 

Pour des elements html <a> . : 1 i nk designe un lien qui n’a pas ete encore visite. 

A I'inverse, :vi si ted designe un lien qui a deja ete visite. 

hover, active, focus 

Pseudo-classes dynamiques : la premiere s'applique a un element survole par la souris, la 
seconde a un element active (un bouton clique, avec le bouton de la souris toujours 
presse, par exemple), la derniere a un element dont le focus (un <textbox> a ete clique 
au moyen de la souris par exemple, et dans lequel se trouve alors le curseur). 

fi rst-1 i ne, fi rst-1 etter 

Comme leur nom I'indique, elles s'appliquent respectivement a la premiere ligne et a la 
premiere lettre d'un element, descri pti on : fi rst-1 etter { font -weight : 
bol d ; } met en gras la premiere lettre de chaque element <descri ption>. 

lang(nom de la langue) 

Pour les attributs html : 1 ang ou xml : 1 ang dans les documents XHTML. Permet de 
selectionner des elements en fonction de leur langue. 

before, after 

Servent a creer automatiquement du contenu. elles s'utilisent de la maniere suivante : 
p:before { content: "ce qui suit est un paragraphe"; }. 
body:after { content: "Le document HTML est fini"; }. 

Les autres declarations specifiees dans p : before ne s'appliqueront qu'a la chaine 
"ce qui suit ..." tandis que celles specifiees dans p s'appliqueront au paragraphe 
et a la chaine "ce qui suit...". 


Les proprietes utiles en CSS 2.1 

Encore une fois, nous n’evoquerons ici que les proprietes pouvant servir 
avec XUL ; seules leurs valeurs les plus usuelles sont donnees ici. La plu- 
part du temps, il est possible de leur assigner une valeur « inherit », qui 
est celle fournie par un selecteur place plus haut dans la cascade CSS. 

Positionnement et tailles 


Propriety 

Valeurs courantes 

Description 

top, 1 eft 

Longueur ou pourcentage 

Definit la distance au bord superieur de la page (top) et au bord gau- 
che de la page (1 eft) ; il existe aussi ri ght et bottom. 

width, height 

Longueur ou pourcentage 

Definit largeur et hauteur d’un element. 
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Propriete 

Valeurs courantes 

Description 

max-wi dth, 
max-hei ght 

Longueur ou pourcentage 

Definit largeur et hauteur maximales d'un element. Utilisee dans XUL 
Forum pour donner une largeur maximale au titre d’un pop-up sujet (le 
texte en trop est remplace par «... »). Leur equivalent pour des minima 
s'obtient en changeant max-wi dth en mi n-wi dth et max- 
height en min-height. 

posi ti on 

absolute | fixed | 
static | relative 

Definit une position absolue, c'est-a-dire place un element au pixel 
pres. Pour une explication plus detaillee, consulter la serie des trois 
articles de qualite « Initiation au positionnement CSS » d'Openweb : 
http://openweb.eu.org/css/. 

z-i ndex 

Entier 

Definit la position de I'element sur I'axe vertical, allant de I'ecran vers 
les yeux du lecteur. Une valeur superieure indique une position plus en 
avant, done au-dessus des cadres dont le z-i ndex est inferieur. Utili- 
see pour superposer les pop-ups sujet dans XUL Forum. 


Bordures, marges, marges internes 


Propriete 

Valeurs courantes 

Description 

margi n 

Longueur ou pourcentage, au 
nombre de 1 ou 4 

Si il n'y a qu'une valeur, e'est la largeur de la marge generale autour 
de I'element qui est specifiee. S'il y en a quatre, cela revient a ecrire : 
margin = margin-top margin-right margin-bottom 
margin-left (soit le sens des aiguilles d'une montre). 

paddi ng 

Longueur ou pourcentage, au 
nombre de 1 ou 4 

Meme syntaxe que pour la marge ci-dessus, sauf que padding repre- 
sente la marge interne (voir I'illustration du chapitre 6). 

border-wi dth 

thin | medium | thick 

OU longueur, au nombre de 1 
ou 4 

Epaisseur de la bordure : fine, medium ou epais, ou bien longueur CSS. 
S'il y a quatre valeurs, I'ordre est le meme : top right bottom 
left. 

border-color 

Couleur CSS, 1 ou 4 valeurs 

Couleur de la bordure. 

border-styl e 

none, dotted, dashed, 
sol i d, doubl e, groove, 
ridge... 

Style de la bordure : aucune, pointilles, tirets, trait simple, trait double, 

« enfoncee » dans I'arriere-plan, « depassant » de cet arriere-plan... 

border 

border-width border- 
style border-color 

Raccourci. Les quatre sous-versions border-top border-right 
border-bottom border-left existent aussi. 


Les proprietes visuelles 


Propriete 

Valeurs courantes 

Description 

vi si bi 1 ity 

visible | hidden 

Permet de dessiner ou non un element sur la page (I'espace alloue est 
tout de meme present). 


278 


www.frenchpdf.com 


Propriety 

Valeurs courantes 

Description 

cl i ppi ng 

auto | rect(a, b, c, d) 

Definit une portion de I'element a afficher : tout I'element (valeur auto) 
ou un rectangle a determiner. 

overfl ow 

hidden | visible | 
scroll | auto 

Que faut-il faire lorsque le contenu d'un element depasse de la zone 
qui lui est allouee ? Le cacher, le montrer (et auquel cas le texte 
deborde du cadre), fournir obligatoirement des barres de defilement, 
ou laisser le navigateur gerer ce defilement ? 


Les listes 


Propriety 

Valeurs courantes 

Description 

1 i st-styl e-type 

disc | circle | square 
| decimal | decimal - 
leading-zero | lower- 
roman | upper-roman | 
lower-greek | lower- 
latin | upper-1 atin | 
armenian | georgian | 
lower-alpha | 
upper-alpha | none 

Le type de puce qui est utilise pour les listes HTML : 1 ower-1 ati n 
numerotera i, ii, iii, iv, v, 1 ower-al pha numerotera a, b, c, d, e... 

1 i st-styl e-posi ti on 

inside | outside 

Definit si la puce doit etre dans le bloc de texte ou en dehors. Voir 
I'illustration sur le working draft du W3C. 

► http://www.w3.Org/TR/CSS21/generate.html#img-list-inout 

1 i st-styl e-image 

un URI | none 

Permet de fournir notre propre URL vers une image servant a generer 
la puce. Tres utile en XUL. Sert pour les elements de menu, les boutons 
de la barre d'outils, la liste des utilisateurs, I'arbre... 

1 i st-styl e 

1 i st-styl e-type 

1 i st-styl e-posi t ion 
list-style-image 

Permet de specifier d'un seul coup les trois proprietes ci-dessus. 


Couleurs et arriere-plans 


Propriety 

Valeurs courantes 

Description 

color 

Une couleur CSS 

Definit la couleur d'avant-plan d’un element : utile pour la couleur du 
texte par exemple. 

background- col or 

Une couleur CSS | 
transparent | none 

Definit la couleur d'arriere-plan (attention, orthographe americaine du 
mot « color », et non pas le « colour » a I'anglaise). Peut etre utilisee 
pour des fenetres transparentes en XUL. Voir : 

► http://pavlov.net/blog/archives/2005/04/canvas_and_xul.html 

background-image 

Un URI | none 

Definit I'image d’arriere-plan. 
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Propriete 

Valeurs courantes 

Description 

background- repeat 

repeat | repeat-x | 
repeat-y | no-repeat 

Faut-il repeter I'image d'arriere-plan si elle n'occupe pas tout I'espace 
de la page ? 

background-attachment 

scroll | fixed 

L’arriere-plan doit-il defiler avec la page ? Oui ou non 

background-posi ti on 

pourcentage pourcentage 
| longueur longueur 

Definit la distance au bord gauche et au bord superieur pour le posi- 
tionnement de I'arriere-plan. 

background 

background- col or 
background -image 
background- repeat 
background -attachment 
background-posi tion 

Raccourci pour specifier en meme temps les proprietes ci-dessus. 


Polices 


Propriete 

Valeurs courantes 

Description 

font-fami ly 

valeurl, valeur2... 

Liste de polices a appliquer ; si la premiere n'est pas trouvee, le navi- 
gateur tentera d'appliquer la seconde, et ainsi de suite. La police peut 
etre soit une valeur nominale : Arial, "Arial Black" (entre guillemets si 
la police est en plusieurs mots), soit une valeur generique comme : 
seri f, sans-seri f, cursive, fantasy, monospace. II est 
recommande de laisser une valeur generique en dernier lieu. 

font-styl e 

italic | oblique | 
normal 

Une police marquee obi i que peut provenir de I'inclinaison d’une 
police normale. Si le navigateur ne trouve pas de police italique corres- 
pondent, il tentera d'appliquer une police oblique. 

font-vari ant 

small -caps | normal 

Pour afficher en « petites majuscules », comme les titres de remarques 
de ces cahiers : Attention. 

font-weight 

normal | bold | bolder 
| lighter | 100 | 200 | 
300 | 400 | 500 | 600 | 
700 | 800 | 900 

normal correspond a la valeur numerique 400 et bol d a la 
valeur 700. bolder et 1 i ghter sont respectivement plus gras et 
plus legers que la valeur heritee. 

font-size 

valeur absolue | valeur 
relative | longueur | 
pourcentage 

Une valeurabsolue peut etre : xx-smal 1 | x-small | small | 
medium | large | x-large | xx-1 arge. Une valeur relative 
est soit 1 arger, soit smaller. Elle se refere a la taille de la police de 
I'element parent, il en est de meme pour les pourcentages. Une lon- 
gueur s'exprime avec les unites vues plus haut. 

font 

font-style font-variant 
font-weight font-size / 
line-height font-family 

Les trois premiers elements sontfacultatifs. line-height I'estaussi 
(mais doit etre precede d'un slash : on pourra ecrire p { xx-1 arge/ 
120% }. line-height sert a preciser la hauteur des elements 
lignes places dans un element de type bloc. 
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Propriety 

Valeurs courantes 

Description 

text-al ign 

left | right | center | 
justify 

Ces proprietes parlent d'elle-memes : remplace les proprietes al i gn 
du html : di v. 

text-decoration 

underline | overline | 
line-through | blink 

Le texte aura une ligne en dessous (il sera souligne), au-dessus, par- 
dessus (texte barre), ou dignotera. 

letter-spaci ng, 
word-spaci ng 

Longueur CSS | normal 

Determine un espace supplemental entre les lettres ou les mots. 

text-transform 

capitalize | uppercase 
| lowercase 

Change I'aspect du texte : premiere lettre de chaque mot en majus- 
cule, tout en majuscules, tout en minuscules. 


Les extensions Mozilla a CSS 

Mozilla propose ses propres proprietes CSS, et ses propres pseudo- 
classes, toutes prefixees par -moz- ; il existe aussi des extensions pour 
Opera, commenfant par -o-. Voir les liens ci-contre donnes sur le wiki 
du site XULFr, pour avoir la liste de ces proprietes. 


> http://lxr.mozilla.org/seamonkey/source/ 
layout/style/nsCSSPropList.h 

> http://lxr.mozilla.org/seamonkey/source/ 
layout/style/nsCSSAnonBoxList.h 


Pseudo-dasse 

Description 

: -moz- tree- col umn 

Permet d'acceder aux colonnes d'un arbre (pour choisir une bordure 
par exemple). 

: -moz- tree- row (proprietel, propriete 2 ) 

(exemple : #xf-i ndex-arbre : : -moz-tree-row(nonl u) 

(notez le signe : repete deux fois) 

Permet d'acceder aux lignes d'un arbre (toute la ligne, soit un assem- 
blage de plusieurs cellules). 

: -moz- tree- separator 

Concerne les separateurs (permet de redimensionner les colonnes). 

: -moz-tree-cel 1 

Definit une cellule en particulier. 

: -moz-tree-i ndentati on 

Permet de choisir le « decalage » par rapport a la gauche des messa- 
ges enfants d'un sujet. 

: -moz-tree- 1 i ne 

Definit les lignes servant a connecter les messages a leur sujet (elles 
descendent du petit signe « + »). 

: -moz-tree-cel 1 -text 

Permet d'acceder au texte d'une cellule (et done le mettre en forme). 


II en existe d'autres que vous pourrez retrouver sur : 

► http://www.xulplanet.com/tutorials/xultu/treestyle.html. 
ou sur : 

► http://devel0per.m0zilla.0rg/en/d0cs/XLIL_Tut0rial:Styling_a_Tree 
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Propriete 

Valeurs courantes 

Description 

-moz-appearance 


Quand cette propriete prend la valeur none, les mises en forme qui 
sont appliquees sur un widget et permettent une meilleure integration 
au theme general du systeme d'exploitation, sont alors annulees. 

-moz-bi ndi ng 

URI CSS (avec une ancre) 

Permet d'assigner un binding XBL a un ou des element(s). Voir a ce 
propos le chapitre 1 1 . 

-moz-border-radi us 
(et variantes : 

-moz-border-radi us{ 
bottom! eft , 
bottomright , 
topi eft , top right} 

Longueur CSS 

Pour arrondir les coins d’un cadre. Permet d'obtenir une bordure arron- 
die. Utilisee par defaut pour les <groupbox> qui ont les bords arron- 
dis sur Firefox par exemple. 

-moz-border-{ 
left , ri ght , top , 
bottom}-col ors 

couleurl, couleur2, 
couleur3 . . . 

Pour creer une bordure de 3 pixels, Mozilla dessine successivement 
trois bordures, chacune de 1 pixel : la premiere sera de couleurl, la 
deuxieme de coul eur2, et ainsi de suite. 

-moz-box-al i gn 

start | center | end | 
stretch 

Definit comment placer les elements dans une boite : tout au debut 
(les elements sont colles a gauche pour une <vbox>, en haut pour 
une <hbox>), les centrer, les coller a droite ou en bas, les etirer ? Par 
exemple : <hbox style="height: 500px; "xbutton /> 
<button /></hbox> affichage des boutons ayant une hauteur de 
500 pixels. Avec -moz-box-al i gn : end, les boutons gardent leur 
taille normale et sont places en bas de la boite horizontale. 

-moz-box-di recti on 

normal | reverse 

Pour que les elements soient affiches dans I'ordre dans lequel ils sont 
places dans le document XUL, ou pour que I'ordre soit inverse. 

-moz-box-fl ex 

Entier 

Equivalent de I'attribut f 1 ex=" " d'un element XUL. 

-moz-box-ori ent 

vertical | horizontal 

Equivalent de I'attribut ori ent=" ". 

-moz-i mage- regi on 

Rectangle CSS 

Pour afficher une portion seulement d’une image. Utilisee pour les 
boutons de la barre d'outils. 

-moz-opacity 

Decimal 

Pour rendre un element transparent (et afficher ce qui est situe au-des- 
sous de lui). 0 : transparent ; 1 : opaque ; entre les deux : partiellement 
transparent. 

-moz-user-focus 

ignore | normal 

Quand cette propriete a la valeur i gnore, I'element concerne ne peut 
pas obtenir le focus. 

-moz-user-i nput 

disabled | enabled 

Indique si I'utilisateur peut modifier I'element concerne. Equivalent a 
<xxx di sabl ed="true"> (ou <xxx sera souvent <textbox). 

overfl ow 

-moz-scroll bars-horizontal 
| -moz-scroll bars-verti cal 
| -moz-scroll bars-none 

Controle plus finement quelles barres de defilement il faut afficher. 

-moz-col umn- count 

Entier 

Permet une mise en forme automatique en colonnes. A appliquer sur 
un bloc <di v> par exemple, pour forcer le texte a apparaitre sous 
forme de colonnes. (voir http://weblogs.mozillazine.org/roc/ 
archives/2005/03/gecko_1 8_for_we.html). 
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Propriete 

Valeurs courantes 

Description 

-moz-col umn-wi dth 

Longueur CSS 

Specifie la largeur des colonnes. 

-moz-col umn-gap 

Longueur CSS 

Specifie I'espace entre des cellules. 

-moz-smf 1 ey 

N'est plus utilise 

Par contre, chrome ://communi cator/ski n/smi 1 eys . css 
vous sera certainement utile pour utiliser les smileys inclus dans la 
suite Mozilla ! 


Figure D-2 Joli... mais lent ! 

La propriete -moz-opacity est tres amusante, 
mais elle pose de gros problemes de performance... 
dans le cas de XUL Forum. Sur la copie d'ecran, le 
deplacement des sujets est tres saccade. A n'utiliser 
que sur des elements fixes ! 
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Reference des elements 
XUL graphiques 



Cette derniere annexe vous propose une veritable reference complete des 
elements XUL. En effet, la technologie XUL en elle-meme n’a ete que 
tres peu utilisee : nous l’avons vue en debut d’ouvrage puis, lors de quel- 
ques apparitions ephemeres. Ce sont surtout les autres technologies con- 
nexes qui ont pris le pas : communication avec RDF ou services web, 
integration dans un navigateur ou utilisation du protocole LDAP, distri- 
bution des logiciels avec XPInstall... On aurait pu appeler ce livre « Les 
Cahiers du programmeur XPFE » ! 

Pour pallier ce qui peut etre peripi comme un manque, et fournir la liste 
des elements qui seront utiles a votre application, cette annexe etablit la 
liste des elements graphiques XUL : non pas des elements abstraits 
comme le <rule> des templates , mais plutot des elements concrets, visi- 
bles, dont vous aurez peut-etre besoin un jour ! 

Des attributs generiques, communs a tous les elements, sont generale- 
ment applicables : height, width, orient, crop, id, datasources, 
oncommand, value... ils ne sont pas precises ici, sauf lorsqu’ils ont une uti- 
lite bien precise. Ils correspondent respectivement a la hauteur de l’ele- 
ment, sa largeur, son orientation s’il est un conteneur (horizontale ou 
verticale), la maniere dont on doit traiter un texte qui deborde, son iden- 
tifiant, une source RDF servant a le remplir, un gestionnaire d’evene- 
ment, une valeur a utiliser dans JavaScript... 

Pour chaque element, seront specifies ses attributs (a ecrire dans le fichier 
XUL) et ses methodes (a appeler depuis JavaScript). Les attributs sont aussi, 
pour la plupart, accessibles depuis JavaScript (ce sont alors des proprietes), 
mais il n’est pas toujours possible de les modifier ! En fait nous ne distin- 
guons pas ici les attributs (decrits dans le fichier XUL) des proprietes (acces- 
sibles par JavaScript), car le parallele entre les deux est tres important : le 
1 abel d’un bouton est aussi bien une propriete qu’un attribut. 

www.frenchpdf.com 


Les Cahiers du programmeur 


x 


Pour aller plus loin Reference XUL Planet 

Bien sur, vous I'avez deja compris, le site de refe- 
rence reste XUL Planet qui propose des definitions 
completes de tout ce qui est vu ici, mais aussi les 
autres elements XBL non utilises (comme 
<destructor>), les elements « abstraits »... 

La XUL periodic table est aussi fort utile, avec 
un aperqu des differentes manipulations possibles : 

► http://www.hevanet.com/acorbin/xul/ 
top.xul 

► http://www.xulplanet.com/references/ 


Culture Les differents types de boutons 

II y a quatre types de boutons, en plus du type 

normal : 

• Les boutons checkbox, a cocher ou decocher 

a I'aide d'un die de souris. Mozilla gere auto- 
matiquement le changement d'etat, a moins 
que vous ne specifiez 

autoCheck="fal se". 

• Les boutons menu, ouvrant un menu lorsqu'on 
clique sur le bouton (ecrire : 
<buttonxmenupopup> . . . 
</menupopupx/button>). 

• Les boutons menu-button, avec une petite 
fleche a droite du bouton. La fleche ouvre le 
menupopup, alors que le die sur le bouton 
donne un resultat different. S'utilise de la 
meme maniere que les boutons menu. 

• Les boutons radio, a grouper avec I'attribut 
group. 


WWW 


Ceci permet de simplifier l’acces aux informations dans cette reference. 
Bien sur, si vous avez un doute, le site XUL Planet s’impose ! Les attri- 
buts qui sont marques [RO] sont read-only , e’est-a-dire en lecture seule : 
on ne peut y acceder que par JavaScript. 

<arrowscrollbox> 

II s’agit de la boite defilante qui est utilisee lorsqu’on clique sur un dos- 
sier de la Bookmarks Toolbar dans Firefox. De petites fleches sont affi- 
chees en haut et en bas, cliquables, permettant de faire defiler le 
contenu. On peut la remplir avec des elements <button> par exemple. 

Methode utile 

• scroll Byindex (d) ou d represente le defilement, positif ou negatif 
selon le sens que Ton veut lui donner. 

<box> 

La boite traditionnelle... voir le chapitre 3 a propos du modele de boite. 

Attribut utile 

• orient: pour transformer cette boite en boite horizontale (par 
defaut) ou verticale. 

< button > 

Ce classique bouton peut cependant etre utilise de multiples manieres... 
les meilleurs resultats sont obtenus avec Mozilla et le theme moderne. 
Firefox rend en fait assez mal les boutons actives et non actives, il vaut 
done mieux preferer la traditionnelle suite Mozilla, pour ensuite essayer 
de « porter » tout ceci vers Firefox. 

Attributs utiles 

• di sabl ed : quand la valeur est true, desactive le bouton. 

• type : pour choisir un type de bouton special. 

• checked : true ou false, pour choisir d’avance l’etat du bouton (dans 
le cas d’un bouton checkbox ou radio). 

• group : pour des boutons radio, il faut les grouper ; e’est le role de cet 
attribut : dans un groupe de boutons radio, un seul peut etre selectionne. 

• open : pour savoir si le menu est par defaut ouvert ou non (true ou 
fal se). 

• label : le titre du bouton. 

• i mage : URL vers une image a afficher dans le bouton, a cote du 
texte ; sa position dans le cadre du bouton est a controler avec orient 
(valeur horizontal : a gauche du texte, vertical : au-dessus du texte) 
et avec di r (si valeur reverse, a droite ou au-dessous). 
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<browser> 

Cet element est destine a afficher une page, a la maniere dune <i f rame>, 
mais propose des proprietes propres a un navigateur : historique, home- 
page... Utilisable uniquement dans du chrome://. C’est en fait un element 
interne, au maniement complexe : si vous visualisez une page contenant 
un <browser> dans un onglet de Firefox, vous remarquerez que les bou- 
tons Precedent, Suivant, Recharger du navigateur s’appliquent desormais a 
votre objet <browser>. II faut l’utiliser dans une fenetre separee, et creer 
vos propres boutons Precedent, Suivant, Recharger, etc. II faut voir pour 
un tres bon exemple d’utilisation le programme de demonstration 
MyBrowser, qui fonctionne dans le cadre de XUL Runner. 

II est interessant de noter au passage que <browser> est un widget XBL 
dont l’implementation est dans chrome: //global /content/bindings/ 
browser .xml . Ce fichier est bien sur plus complexe que ce que nous avons 
utilise pour XUL Forum. II montre cependant quelques astuces utiles : 
utilisation d’un attribut anonid pour pallier l’unicite des id (en fait une 
astuce similaire a notre utilisation des classes CSS), heritage de bindings 
(grace a la propriete xbl : extends), bref du XBL de haut niveau ! 

Attributs utiles 

• homepage : permet de specifier une page de demarrage pour cet objet 
<browser>, a utiliser plus tard avec la methode goHomeO. Pour y 
acceder via JavaScript, on utilisera la propriete homePage [RO]. 

• src : pour indiquer dans le document XUL quelle page afficher. 

• canCoBack [RO], canCoForward [RO] : ces deux proprietes sont vraies 
si le navigateur peut respectivement aller en arriere ou en avant. 

• contentDocument [RO] : l’objet Document de la page en cours dans le 
<browser>. 

• contentTitle [RO] : le titre de la page. 

• contentWi ndow [RO] : l’objet Wi ndow de la page en cours. 

Methodes utiles 

• goBackO, goForwardO : pour se deplacer dans l’historique : page pre- 
cedente ou suivante. 

• loadllri (adresse, referrer, charset) : pour aller a l’adresse specifiee, en 
fournissant un referrer (page de laquelle on vient) et un jeu de caracteres. 

• reload (), stopO : pour recharger et arreter le chargement de la page 
en cours. 

Nous ne nous attarderons pas sur cet element tres complexe qui merite- 
rait bien plus qu’une page de reference. Si jamais vous avez besoin d’affi- 
cher une autre page web dans votre document XUL, de suivre son 
chargement, de gerer un historique, <browser> permettra que les compo- 
sants XPCOM s’adaptent parfaitement a cet usage ! 
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<checkbox> 

La desormais celebre case a cocher reprend la plupart des attributs du 
bouton. 

Attributs utiles 

• checked : indique si cette case est cochee ou non. 

• di sabl ed : pour desactiver la case. 

• i mage : pour lui associer une image. 

• 1 abel : pour associer un texte a cette case a cocher. 

< caption > 

Specifie le titre d’un <groupbox>, utilise dans le chapitre 3. 

Attributs utiles 

• i mage : pour associer une image. 

• label : pour associer un texte. 

<colorpicker> 

Permet de choisir une couleur parmi les couleurs dune grille ! 

Attributs utiles 

• onchange : pour reagir aux changements de couleur. 

• col or : pour recuperer la couleur ou en choisir une par defaut (utiliser 
alors la forme #RRGGBB). 

• type : si valeur button, l’element s’affichera comme un bouton dont 
le pop-up est la grille des couleurs. 

<deck> 

Pour superposer des elements mais n’en afficher qu’un a la fois. Les ele- 
ments a superposer sont les elements enfants du <deck>. 

Attributs utiles 

• selectedlndex : pour obtenir ou changer l’index de l’element actuel- 
lement affiche (0 representera le premier element fils de <deck>, 1 le 
second, etc.). 

• sel ectedPanel : pour recuperer cet element. 

<description> 

Affiche du texte. On peut lui associer une classe CSS predefinie, pour avoir 
un formatage par defaut : header, i ndent, monospace, pi ai n, smal 1 -margi n. 
Attributs utiles 

• value : pour choisir sa valeur (la mettre plutot en tant qu’element 
fils : <descri ption>Ici le contenu. . .</description>). 

• disabled : pour desactiver le texte ; generalement, il apparait grise. 
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<dialog> 

Sert a creer des boites de dialogue en XUL pur sans utiliser de composants 
XPCOM comme nous l’avons fait au chapitre 8. N’hesitez pas a consulter 
la page du tutoriel du site XUL Planet a ce sujet ! <dialog> remplace 
<wi ndow>. 

Attributs utiles 

• buttons : la liste des boutons (separes par des virgules) a afficher dans 
cette boite de dialogue ; les elements courants sont accept, cancel, 
hel p. 

• ondialogaccept, ondi al ogcancel , ondi al oghel p : pour associer un 
gestionnaire d’evenement a chacun des boutons. 

• ti tl e : pour choisir le titre de la boite de dialogue. 

Proprietes utiles 

• acceptDialogO, cancel DialogO : pour simuler la validation ou le 
refus de la boite de dialogue, soit respectivement des dies sur les bou- 
tons OK ou Annuler. 

<dialogheader> 

Sert a titrer, e’est-a-dire a placer un texte dans une boite de dialogue : on 
ecrira <dialogxdialogheader /></dialog>. 

Attributs utiles 

• title : le titre du <dialogheader>. 

• description : le texte a associer a cette boite de dialogue. 

<editor> 

L’editeur inclus dans Mozilla est extremement difficile a utiliser : il 
n’inclut en effet pas la barre d’outils permettant de mettre en forme le 
texte, il faut done la fournir soi-meme. La meilleure solution si vous 

voulez un editeur est d’utiliser une extension comme Mozile. Vous ► http://mozile.mozdev.org 
devriez cependant trouver quelques exemples d’utilisation dans le code 
de Mozilla de <editor>, pour la redaction de courriers electroniques par 
exemple. 

Attributs utiles 

• editortype : type d’editeur, en HTML ou en texte. 

• sre : le fichier a editer. 

Methode utile 

• makeEditable(type,attendre) : rendre un editeur editable, avec le 
type html ou text. On specific si Ton doit attendre que le document 
soit charge ou non. 
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<grid> 

Sert a creer un tableau ; vu au chapitre 3, cet element s’utilise avec 
<columns>, <column>, <rows>, <row>. On ecrira : 

<grid> 

<col umns> 
ccolumn /> 

</columns> 

<rows> 

<row> 

<descri pti on value="Un element" /> 

</ row> 

</ rows> 

</gri d> 

<grippy> 

La poignee est utilisee dans un separateur, comme on l’a vu au 
chapitre 4. A placer comme element fils d’un <spl itter>. 

<groupbox> 

Sert a dessiner une bordure (generalement arrondie) autour de ses ele- 
ments fils. Utilise au chapitre 3. 


<hbox> 

Nous ne la presentons plus : c’est la celebre boite horizontale ! 


<iframe> 

Pour afficher une page web dans un cadre, tout simplement. 

Attributs utiles 

• s rc : pour specifier FURL de la page a afficher. 

• contentDocument [RO], contentWi ndow [RO] : respectivement les 
objets Document et Wi ndow correspondant a la page affichee. 


< imago 

Sert a afficher une image. 

Attributs utiles 

• s rc : pour specifier FURL de l’image a afficher. 

• width, height : largeur et hauteur de l’image. 
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<key> 

Cet element represente une touche du clavier et soit s’associe a un ele- 
ment de menu (pour en faire un raccourci de menu), ou soit s’utilise seul 
avec un attribut oncommand (pour en faire un raccourci clavier). Dans tous 
les cas, on ecrira <keysetxkey /></keyset>. Voir a ce propos le 
chapitre 8 pour plus de details. 

Attributs utiles 

• key : une touche du clavier (generalement alphanumerique). 

• keycode : une constante commenfant par VK_ et representant une 
touche speciale (comme Echap). 

• modifiers : pour faire un raccourci avec un modifieur ; les valeurs 
possibles sont Ctrl, alt, meta, control, accel. 


<listbox> 

Une liste d’elements, comme la liste des utilisateurs de XUL Forum, 
peut prendre plusieurs formes, selon le degre de complexite voulu : 

• <1 i stboxxl isti tern vaiue="xxx" /></listbox> permet d’afficher une 
liste simple, dont les lignes portent seulement un texte. 

• Le deuxieme exemple, plus complexe, permet d’afficher des colonnes. 


Exemple de liste a plusieurs colonnes 

<1 i stbox> 

<1 i stcol s> 

<1istcol /> 

<1istcol /> 

</l i stcol s> 

<1 i stitem> 

<1istcell val ue="Co1 onne 1, ligne 1" /> 

<1i steel 1 val ue="Col onne 2, ligne 1" /> 

</l i sti tem> 

</l i stbox> 

• Le dernier exemple sera l’occasion de donner un titre a ces colonnes. 


Exemple de liste a plusieurs colonnes et avec titre aux colonnes 

<1 i stbox> 

<1 i sthead> 

•clistheader label="Titre colonne 1" /> 
•clistheader label="Titre colonne 2" /> 

</l i sthead> 

<1 i stcol s> 

<listcol /> 

<listcol /> 

</l i stcol s> 
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<1 i sti tem> 

•clistcell label="Colonne 1, ligne 1" /> 
clistcell label="Colonne 2, ligne 1" /> 
</listitem> 

</l i stbox> 


Astuce Images dans les listes 

Les classes CSS li sti tem-i conic et 
1 i steel 1 -i coni c, une fois respectivement 
appliquees aux elements <listitem> et 
<li steel 1>, vous permettront d'utiliser leur 
propriete image pour leur associer de sympathi- 
ques graphiques comme dans la liste des 
membres ! 


Cette balise propose des methodes de manipulation des elements de la 
liste, beaucoup plus nombreuses que celles evoquees ici. La liste est a 
l’adresse suivante : http://localhost/~jonathan/elemref/refJistbox.html. 

Attributs utiles 

• rows : indique le nombre de lignes a afficher. 

• disabled : desactive l’element. 

• seltype : single ne permet de selectionner qu’une colonne a la fois ; 
multiple permet des selections multiples (utiliser selType en Java- 
Script). 

Methodes utiles 

• appendltem(texte de 1 'element, valeur associee) : ajoute automati- 
quement un element. 

• getItemAtIndex(i ndex) : obtenir un element particulier de la liste. 

• sel ectedltem, selectedltems : index de l’element selectionne, ou 
tableau des index des elements selectionnes. 


<menubar> 

Pour creer un menu on utilisera la construction suivante (voir le chapitre 5 
pour plus d’informations sur les menus, dans la creation de XUL Forum). 

<menubar> 

<menu label="Fichier"> 

<menupopup> 

cmenuitem label="Nouveau" /> 

<menuseparator /> 

<menuitem label="Quitter" /> 

</menupopup> 

</menu> 

</menubar> 

Attribut utile 

• gri ppyhi dden : cache la poignee a gauche du menu, dans la suite 
Mozilla. 

Attributs utiles de <menu> 

• di sabl ed : pour le desactiver. 

• key : id d’un element <key> pour associer un raccourci clavier a ce 
menu. 

• open : pour ouvrir le menu par defaut. 
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Attributs utiles de <menuitem> 

• disabled : pour le desactiver. 

• key : id d’un element <key> pour associer un raccourci clavier a cette 
entree de menu. 

• checked : pour cocher l’entree de menu ou la selectionner, dans le cas 
de boutons cochables, ou de boutons radio. 

• type : checkbox ou radi o selon le type d’entree de menu que Ton veut. 

• image : pour lui associer une image ; il faut utiliser la classe CSS 
menui tem-i coni c (menuitem-non-i coni c permet a l’inverse de sup- 
primer la marge gauche reservee a l’image). 

<menulist> 

Cree une liste deroulante, a la maniere d’un <select> en HTML. On 
mettra comme element fils un <menupopup>. 

Attributs utiles 

• disabled : pour le desactiver. 

• editable : pour specifier si Ton peut entrer directement la valeur au 
clavier. 

• i mage : pour specifier l’URL dune image eventuelle a afficher. 

• open : pour ouvrir le pop-up par defaut. 

<menupopup> 

II s’agit d’un pop-up amene a contenir des entrees de menu. Utilise pour 
les barres de menus, les boutons de type menu, les listes deroulantes... 

Attributs utiles 

• onpopuphi dden, onpopupshown : gestionnaire d’evenement a appeler 
lorsque respectivement le pop-up est cache ou affiche. 

• onpopuphi di ng, onpopupshowi ng : gestionnaire d’evenement a appeler 
avant de, respectivement, masquer ou de montrer le pop-up. 

Methodes utiles 

• hide Popup () : pour masquer le pop-up. 

• moveTo(x,y) : pour deplacer le pop-up. 

• si zeTo(wi dth , hei ght) : pour redimensionner le pop-up. 

<overlay> 

Repartit un contenu sur plusieurs fichiers, centralise des elements com- 
muns a plusieurs pages, etc. Voir le chapitre 5. 


293 


www.frenchpdf.com 


- Reference des elements XUL 


Les Cahiers du programmeur 


X 


<page> 

Remplace <window>, si vous comptez utiliser votre page XUL dans une 
<i f rame>. 

<popup> 

Les attributs et les proprietes sont les memes que pour <menupopup> mais 
l’usage est moins specifique. Le <popup> se place dans un <popupset> et 
peut etre associe a un clic gauche sur un element via son attribut popup 
ou a un clic droit via son attribut context (ce sera alors le menu contex- 
tuel). II faut cependant garder a l’esprit que Faction contextuelle peut 
etre differente du clic droit, sur Mac par exemple. 

II est d’usage de remplir un <popup> avec des <menuitem>. 

<progressmeter> 

II s’agit de la barre d’avancement. 

Attributs utiles 

• mode : undetermined pour un avancement dont la duree n’est pas 
connue, determi ned pour un avancement dont la duree est connue. 

• value : le pourcentage d’avancement. 

<radio> 

Le bouton radio, similaire a son confrere en HTML. On le placera tou- 
jours dans un element <radiogroup> : ainsi, de tous les <radio> contenus 
dans un <radiogroup>, un seul pourra etre selectionne. 

Attributs utiles 

• di sabl ed : cet element est lui aussi desactivable. 

• label : le texte a afficher. 

• sel ected : si cet element doit etre selectionne par defaut ou non. 

• src : FURL dune eventuelle image a afficher. 

<scrollbar> 

Vous ne vous servirez quasiment jamais de la barre de defilement pour 
faire defiler du contenu, Felement en question fournissant toujours sa 
solution interne. Les barres de defilement s’ajouteront toutes seules a un 
arbre par exemple ; si Felement s’obstine, vous pouvez tenter un 
sty1e="overf1ow: auto;". 

En revanche, si vous avez besoin de selectionner une valeur dans une 
plage de donnees, cet element peut se reveler utile. L’attribut orient per- 
mettra de l’orienter verticalement ou horizontalement. 
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Attributs utiles 

• maxpos : la valeur maximale prise par cette barre de defilement. 

• curpos : la valeur actuelle. 

• i ncrement : la valeur a ajouter ou a supprimer lorsqu’on clique sur les 
fleches ; en franfais, on parlerait de « pas ». 

• pagei ncrement : le pas lorsqu’on clique sur la zone vide entre les fle- 
ches et le rectangle representant la position actuelle. 

<spacer> 

Occupe l’espace vide ; a utiliser en combinaison avec son attribut f 1 ex. 

<splitter> 

Ce separateur est utilise dans XUL Forum pour distinguer la liste des 
membres de l’arbre des messages. Un <grippy> peuty etre place : ce sera 
la poignee qui, lorsqu’elle est cliquee, peut servir a reduire totalement un 
pan de l’interface. 

La classe CSS tree-splitter est utilisee pour permettre le redimension- 
nement des colonnes d’un arbre. Elle a ete utilisee au chapitre 5. 

Attributs utiles 

• collapse: lorsqu’on doit masquer une partie de l’interface, est-ce 
celle situee avant (valeur before) ou apres (valeur after) le 
<splitter> ? 

• resi zebefore, resizeafter : pour determiner les elements a reduire 
lorsqu’on bouge le <splitter>. Est-ce l’element le plus pres du 
<splitter> (valeur closest), le plus eloigne (valeur farthest) ou doit- 
on redimensionner le conteneur situe avant ou apres (valeur grow) ? 

• state : open (ouvert), collapsed (le pan de l’interface a ete masque), 
dragging (en train d’etre redimensionne). 

<stack> 

Similaire a un <deck>, mais affiche tous les elements en meme temps. 

<statusbar> 

La traditionnelle barre de statut. 

< statusbar panel > 

Un element de la barre de statut : un texte (propriete label), une image 
(propriete src) mais pas les deux. 
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<stringbundle> 

Generalement place dans un conteneur <stri ngbundleset> pour fournir 
les chaines a JavaScript en fonction de la langue. 


<tabbrowser> 

Contient des <browser>, mais agences avec onglets dans un <tabbox>. 


<tabbox> 

Permet d’afficher des panneaux a onglets : a chacun correspond un pan- 
neau. Nous en avons utilise un pour les onglets Liste des membres et Infos 
sur un membre. Cet element est employe de la maniere suivante : 

<tabbox> 

<tabs> 

<tab labeWOnglet 1" /> 

</tabs> 

<tabpanel s> 

<tabpanel> 

<descri pti on>Ici le contenu du panneau l</descri pti on> 
</tabpanel> 

</tabpanel s> 

</tabbox> 

Attribut utile de <tabpanel s> 

• selectedlndex : pour selectionner un onglet en particulier. 

Attribut utile de <tabs> 

• closebutton : booleen, sert a creer les boutons pour fermer ou ouvrir 
un onglet, comme dans le navigateur. 


Culture Les differents types 
de zone de texte 

il y en a trois : 

• autocomplete, pour essayer de deviner la 
valeur que I'utilisateur veut rentrer, a la 
maniere des champs de formulaire HTML dont 
Firefox se rappelle les valeurs (passage par la 
documentation de XUL Planet fortement con- 
seille). 

• password, pour les mots de passe (affiche 
des etoiles au lieu des caracteres). 

• timeout : si Ton specifie le delai d dans 
Tattribut timeout, Tevenement command 
sera lance apres chaque nouvelle touche ren- 
tree, et apres le delai d. 


<textbox> 

La classique zone de texte, utilisee dans la vie de tous les jours par le 
developpeur XUL ;-) ! 

Attributs utiles 

• di sabl ed : encore un element qui peut se desactiver. 

• rows, col s : pour specifier le nombre de lignes et de colonnes. 

• mul ti 1 i ne : a utiliser pour avoir plusieurs lignes, comme un 
<html : textarea>. 

• maxlength : le nombre maximal de caracteres que Ton peut entrer. 

• size : le nombre maximal de caracteres que Ton peut afficher. 

• type : pour choisir un type special de <textbox>. 

• selectionStart, selectionEnd : pour choisir ou obtenir l’index de 
debut ou de fin des caracteres selectionnes. 
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Proprieties utiles 

• select 0 : selectionne tout le texte. 

• setSelectlonRange (debut, fin) : selectionne le texte du caractere debut 
au caractere fin (ce sont les index des caracteres qui sont fournis). 

• textLength [RO] : longueur du texte. 

<toolbar> 

Le conteneur pour les boutons de la barre d’outils est utilise dans XUL 
Forum pour contenir les boutons Nouveau, Editer... II existe d’autres 
fonctions, d’autres elements, lies a la personnalisation de la barre d’outils 
dans Firefox, mais ils sont utilises de maniere interne par Firefox, et le 
developpeur « classique » ne les utilise generalement pas. 

Attributs utiles 

• grippyhidden : pour masquer le grippy (servant a masquer une barre 
d’outils) dans la suite Mozilla. 

<toolbarseparator> 

Pour etablir une separation entre les boutons de la barre d’outils. 

<toolbox> 

Le conteneur vertical, amene a contenir les differentes barres : barre de 
menus, barre d’outils, barre avec les favoris... 

<tooltip> 

Cet element est ce que Ton appelle une infobulle en franfais. II est quasi 
equivalent a un <popup>, sauf que Ton y place du texte, des images, bref 
du contenu plus varie que les entrees de menu du <popup>. On l’utilise de 
la maniere suivante : 

<popupset> 

ctooltip i d="xf-tool ti p"> 

<!-- ici du texte, des images, du style, etc. etc. — > 

</tooltip> 

</popupset> 

<monE1ement tool tip="xf-tool tip" /> 

<monAutreE1 ement too1tip="Une infobulle avec juste du texte" /> 
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<tree> 

L’arbre, widget central de XUL Forum. II s’utilise, rappelons-le, de la 
maniere suivante : 

<tree> 

<treecol s> 

<treecol id="colonnel" 1 abel="Col onne 1" /> 

</treecol s> 

<treechi 1 dren> 

<treeitem> 

<treerow> 

ctreecell labeWCellule 1" /> 

</treerow> 

</treei tem> 

</treechi ldren> 

</tree> 

Des exemples plus evolues, avec un second niveau de profondeur, sont 
disponibles au chapitre 5. 

Attributs utiles 

• enableColumnDrag : pour permettre un deplacement par glisser/ 
deposer des colonnes. 

• hidecolumnpiker : pour masquer le petit element permettant de 
montrer/cacher des colonnes. 

• sel type : si ngle pour ne selectionner qu’une ligne a la fois ; mul ti pie 
dans le cas contraire. 

• rows : le nombre de lignes a afficher. 

• sel ectedlndex : l’index de la ligne selectionnee. 

• view: l’objet implementant nsIT reeVi ew qui a servi a creer l’arbre. II en 
existe plusieurs, detailles sur la page de XUL Planet : le choix de l’objet 
servant a creer le contenu de l’arbre est primordial. Dans le cas de XUL 
Forum, c’est un RDF Content Tree, utilise pour les generations RDF et 
proposant des noeuds DOM. Le choix du generateur se fait en fonction 
des contraintes de performance et de manipulation DOM. 


<treeseparator> 

Une ligne de separation dans un arbre. 

<treecol> 

Une colonne d’un arbre. 

Attributs utiles 

• fixed : pour empecher le redimensionnement de cette colonne. 

• hidden : pour masquer cette colonne. 

• i gnorei ncol umnpi cker : pour empecher cette colonne d’apparaitre 
dans la liste des colonnes a afficher ou a masquer. 
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• primary : pour la colonne principale (generalement la premiere) qui 
contiendra un second niveau de profondeur : permet d’activer Inden- 
tation, les petits + ou - servant pour plier ou deplier la structure. 

• src : URL dune image qui remplace le texte de la colonne. 

• type : pour choisir le type de cellules contenues dans cette colonne : 
text (par defaut), checkbox (cases a cocher), progressmeter (barres 
de progression). 

<treecell> 

Une cellule d’un arbre. 

Attributs utiles 

• src : URL dune image a afficher a cote du texte. 

• mode : pour choisir une cellule qui est une barre de progression : none 
(affiche le texte de la cellule et non le <progressmeter>), determined 
(pourcentages exacts), undetermined (duree inconnue). 

• val ue : le pourcentage eventuel pour la barre de progression. 

<vbox> 

La boite verticale. 

<window> 

Une fenetre... element de base d’un fichier XUL ! 

Attributs utiles 

• width, height : largeur, hauteur de la fenetre. 

• screenX, screenY : les coordonnees de la fenetre a l’ecran. 

• sizemode : maximized (fenetre maximisee), minimized (fenetre mini- 
misee) ou normal . 

<wizard> 

Ceci n’est pas un attribut magique servant a creer automatiquement des 

documents XUL... mais un assistant, avec des pages multiples, affichees 

les unes a la suite des autres ! Le tutoriel de XUL Planet donne un bon 

cas d’exemple. Voir http://www.xulplanet.com/tutorials/xultu/wizard.html 

<wizard> 

<wi zardpage> 

<descri pti on>Premi ere page de 1 ' assi stant</descri pti on> 

</wizardpage> 

<wi zardpage> 

<descri pti on>Seconde page... installation de XUL Forum ? 

</descri pti on> 

</wizardpage> 

</wi zard> 
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Attributs utiles 

• title : un titre general ecrase par chaque label des <wizardpage>. 

• pagestep : index de la page actuelle (utiliser pagelndex depuis Java- 
Script). 

• firstpage, lastpage : vrai pour etre a la premiere ou a la derniere 
page (utiliser fi rstPage et lastPage depuis JavaScript). 

• onwi zardback, onwi zardnext, onwizardfi ni sh, onwi zardcancel : ges- 
tionnaires devenement pour respectivement les dies sur les boutons 
Precedent, Suivant, Terminer et Annuler. 

• onpageshow : lorsque la page est montree. 

• canAdvance, canRewi nd : lorsque ces deux proprietes sont fausses, elles 
desactivent les boutons Suivant et Precedent (les changer depuis 
JavaScript). 

Methodes utiles 

• rewind (), cancel (), advance (ID de la page) : pour simuler un appui 
sur les boutons. 

<wizardpage> 

Une page d’assistant. 

Attributs utiles 

• label, description : le titre, et une courte description de cette page 
d’assistant. 

• pageid : pour associer manuellement un identifiant a cette page. 

• next : pour specifier l’identifiant de la page suivante. 

• onpageadvanced, onpagerewound, onpagehide : ces trois gestionnaires 
d’evenement sont appeles au moment de passer a la page suivante, 
precedente, ou de masquer la page; un return false permettra 
d’annuler levenement. 

• onpageshow : lorsque la page est montree. 
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